Testseite JSXGraph
Aus Wiki1
(Unterschied zwischen Versionen)
| Zeile 578: | Zeile 578: | ||
document.getElementById('outputID').innerHTML = output(); | document.getElementById('outputID').innerHTML = output(); | ||
} | } | ||
| + | |||
| + | </jsxgraph> | ||
| + | |||
| + | |||
| + | <script> | ||
| + | |||
| + | <jsxgraph box="BOARD2" width="600" height="600"> | ||
| + | |||
| + | // Würfel mit Seitenlänge 10 (Ecke bei (0,0,0) — Eckpunkte 0..10) | ||
| + | |||
| + | var board = JXG.JSXGraph.initBoard('BOARD2', { | ||
| + | boundingbox: [-15, 15, 15, -15], | ||
| + | axis: false, | ||
| + | showNavigation: true, | ||
| + | keepaspectratio: true, | ||
| + | camera: {z: 50}, | ||
| + | defaultAxes: {x:{withLabel:false}, y:{withLabel:false}} | ||
| + | }); | ||
| + | |||
| + | |||
| + | // Eckpunkte | ||
| + | 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}); | ||
| + | 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}); | ||
| + | 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}); | ||
| + | var H = board.create('point', [0, 10, 10], {name:'H', fixed:true, visible:false}); | ||
| + | |||
| + | |||
| + | // halbtransparente Flächen (fillOpacity 0.5) | ||
| + | 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}); | ||
| + | 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}); | ||
| + | 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}); | ||
| + | |||
| + | |||
| + | // 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> | ||
Version vom 13:13, 8. Sep. 2025
<script>
