|
|
| Zeile 596: |
Zeile 596: |
| | | | |
| | | | |
| - | // Eckpunkte
| + | let baseCube = 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});
| + | [0, 0, 0], [10, 0, 0], [10, 10, 0], [0, 10, 0], [0, 0, 10], [10, 0, 10], [10, 10, 10], [0, 10, 10] |
| - | 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 |
| - | var H = board.create('point', [0, 10, 10], {name:'H', fixed:true, visible:false});
| + | }); |
| | | | |
| - | | + | let baseCube1 = view.create('polyhedron3d', [ |
| - | // halbtransparente Flächen (fillOpacity 0.5)
| + | [ |
| - | var bottom = board.create('polygon', [A, B, C, D], {fillColor:'#1f77b4', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
| + | [0, 0, 0], [1, 0, 0], [1, 1, 0], [0, 1, 0], [0, 0, 10], [1, 0, 10], [1, 1, 10], [0, 1, 10] |
| - | var top = board.create('polygon', [E, F, G, H], {fillColor:'#ff7f0e', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
| + | ], [ |
| - | var front = board.create('polygon', [A, B, F, E], {fillColor:'#2ca02c', 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 back = board.create('polygon', [D, C, G, H], {fillColor:'#d62728', fillOpacity:0.45, strokeColor:'#000', strokeWidth:1});
| + | ] |
| - | 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 |
| - | | + | |
| - | | + | |
| - | // Sichtbare Kanten als Linien (optional)
| + | |
| - | 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]];
| + | |
| - | pairs.forEach(function(p){
| + | |
| - | edges.push(board.create('line', p, {straightFirst:false, straightLast:false, strokeWidth:1}));
| + | |
| | }); | | }); |
| - |
| |
| - |
| |
| - | // Interaktiv: Board rotieren mit Maus (ist in 3D aktiv)
| |
| - | // Kamera-Position anpassbar: board.camera.set({lookAt:[5,5,5]}); // falls gewünscht
| |
| - |
| |
| - |
| |
| - | // Hilfetext (HTML-Element überlagert)
| |
| - | var info = document.createElement('div');
| |
| - | info.style.position = 'absolute';
| |
| - | 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> |
