Testseite JSXGraph

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 51 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
 +
<jsxgraph box="box" width="600" height="600">
 +
var x_min=0;
 +
var x_max=2;
 +
var y_min=0;
 +
var y_max=2;
 +
var dx=(x_max-x_min)/100;
 +
var dy=(y_max-y_min)/100;
 +
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [x_min,y_max,x_max,y_min]});
-
<jsxgraph box="BOARD2" width="600" height="600">
+
  var bound = [0, 10];
 +
  var view = brd.create('view3d',
 +
      [[0.5, 0.5], [1, 1],
 +
      [bound, bound, bound]],
 +
      {});
-
// Würfel mit Seitenlänge 10 (Ecke bei (0,0,0) — Eckpunkte 0..10)
+
let baseCube1 = view.create('polyhedron3d', [
 +
    [
 +
        [0, 0, 0], [10, 0, 0], [10, 10, 0], [0, 10, 0], [0, 0, 10], [10, 0, 10], [10, 10, 10], [0, 10, 10]
 +
    ], [
 +
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
 +
    ]
 +
], {visible: true, color: 'red', opacity: 1
 +
});
-
var board = JXG.JSXGraph.initBoard('BOARD2', {
+
let baseCube2 = view.create('polyhedron3d', [
-
boundingbox: [-15, 15, 15, -15],
+
    [
-
axis: false,
+
        [10, 10, 0], [9, 10, 0], [9, 9, 0], [10, 9, 0], [10, 10, 1], [9, 10, 1], [9, 9, 1], [10, 9, 1]
-
showNavigation: true,
+
    ], [
-
keepaspectratio: true,
+
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
-
camera: {z: 50},
+
    ]
-
defaultAxes: {x:{withLabel:false}, y:{withLabel:false}}
+
], {
 +
    visible: true, color: 'blue', opacity: 1
});
});
 +
let baseCube3 = view.create('polyhedron3d', [
 +
    [
 +
        [9, 10, 0], [8, 10, 0], [8, 9, 0], [9, 9, 0], [9, 10, 2], [8, 10, 2], [8, 9, 2], [9, 9, 2]
 +
    ], [
 +
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
 +
    ]
 +
], {
 +
    visible: true, color: 'green', opacity: 1
 +
});
-
// Eckpunkte
+
let baseCube4 = view.create('polyhedron3d', [
-
var A = board.create('point', [0, 0, 0], {name:'A', fixed:true, visible:false});
+
    [
-
var B = board.create('point', [10, 0, 0], {name:'B', fixed:true, visible:false});
+
        [8, 10, 0], [7, 10, 0], [7, 9, 0], [8, 9, 0], [8, 10, 3], [7, 10, 3], [7, 9, 3], [8, 9, 3]
-
var C = board.create('point', [10, 10, 0], {name:'C', fixed:true, visible:false});
+
    ], [
-
var D = board.create('point', [0, 10, 0], {name:'D', fixed:true, visible:false});
+
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
-
var E = board.create('point', [0, 0, 10], {name:'E', fixed:true, visible:false});
+
    ]
-
var F = board.create('point', [10, 0, 10], {name:'F', fixed:true, visible:false});
+
], {
-
var G = board.create('point', [10, 10, 10], {name:'G', fixed:true, visible:false});
+
    visible: true, color: 'yellow', opacity: 1
-
var H = board.create('point', [0, 10, 10], {name:'H', fixed:true, visible:false});
+
});
 +
let baseCube5 = view.create('polyhedron3d', [
 +
    [
 +
        [7, 10, 0], [6, 10, 0], [6, 9, 0], [7, 9, 0], [7, 10, 5], [6, 10, 5], [6, 9, 5], [7, 9, 5]
 +
    ], [
 +
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
 +
    ]
 +
], {
 +
    visible: true, color: 'orange', opacity: 1
 +
});
-
// halbtransparente Flächen (fillOpacity 0.5)
+
let baseCube6 = view.create('polyhedron3d', [
-
var bottom = board.create('polygon', [A, B, C, D], {fillColor:'#1f77b4', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
+
    [
-
var top = board.create('polygon', [E, F, G, H], {fillColor:'#ff7f0e', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
+
        [6, 10, 0], [5, 10, 0], [5, 9, 0], [6, 9, 0], [6, 10, 8], [5, 10, 8], [5, 9, 8], [6, 9, 8]
-
var front = board.create('polygon', [A, B, F, E], {fillColor:'#2ca02c', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
+
    ], [
-
var back = board.create('polygon', [D, C, G, H], {fillColor:'#d62728', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
+
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
-
var left = board.create('polygon', [A, D, H, E], {fillColor:'#9467bd', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
+
    ]
-
var right = board.create('polygon', [B, C, G, F], {fillColor:'#8c564b', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
+
], {
 +
    visible: true, color: 'grey', opacity: 1
 +
});
 +
let baseCube7 = view.create('polyhedron3d', [
 +
    [
 +
        [5, 10, 0], [4, 10, 0], [4, 9, 0], [5, 9, 0], [5, 10, 10], [4, 10, 10], [4, 9, 10], [5, 9, 10]
 +
    ], [
 +
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
 +
    ]
 +
], {
 +
    visible: true, color: 'darkgrey', opacity: 1
 +
});
-
// Sichtbare Kanten als Linien (optional)
+
let baseCube8 = view.create('polyhedron3d', [
-
var edges = [];
+
    [
-
var pairs = [[A,B],[B,C],[C,D],[D,A],[E,F],[F,G],[G,H],[H,E],[A,E],[B,F],[C,G],[D,H]];
+
        [4, 10, 0], [3, 10, 0], [3, 8, 0], [4, 8, 0], [4, 10, 10], [3, 10, 10], [3, 8, 10], [4, 8, 10]
-
pairs.forEach(function(p){
+
    ], [
-
edges.push(board.create('line', p, {straightFirst:false, straightLast:false, strokeWidth:1}));
+
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
 +
    ]
 +
], {
 +
    visible: true, color: 'lightblue', opacity: 1
});
});
-
 
+
let baseCube9 = view.create('polyhedron3d', [
-
// Interaktiv: Board rotieren mit Maus (ist in 3D aktiv)
+
    [
-
// Kamera-Position anpassbar: board.camera.set({lookAt:[5,5,5]}); // falls gewünscht
+
        [3, 10, 0], [0, 10, 0], [0, 7, 0], [3, 7, 0], [3, 10, 10], [0, 10, 10], [0, 7, 10], [3, 7, 10]
-
 
+
    ], [
-
 
+
        [0, 1, 2, 3], [0, 1, 5, 4], [1, 2, 6, 5], [2, 3, 7, 6], [3, 0, 4, 7], [4, 5, 6, 7]
-
// Hilfetext (HTML-Element überlagert)
+
    ]
-
var info = document.createElement('div');
+
], {
-
info.style.position = 'absolute';
+
    visible: true, color: 'white', opacity: 1
-
info.style.left = '10px';
+
});
-
info.style.top = '10px';
+
-
info.style.padding = '6px 10px';
+
-
info.style.background = 'rgba(255,255,255,0.8)';
+
-
info.style.borderRadius = '6px';
+
-
info.style.fontFamily = 'Arial, sans-serif';
+
-
info.style.fontSize = '13px';
+
-
info.innerHTML = 'Würfel 10×10×10 — Drag mit der Maus zum Rotieren. Faces sind halbtransparent.';
+
-
document.body.appendChild(info);
+
</jsxgraph>
</jsxgraph>

Aktuelle Version vom 14:25, 8. Sep. 2025

Von „https://www.technikundkultur.de/wiki1/index.php5?title=Testseite_JSXGraph“
Persönliche Werkzeuge