Spaces:
Running
Running
| <html><head><base href="https://dodecahedra.websim.ai" /> | |
| <title>Dodecahedra Animation in WebGL</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| background-color: #000; | |
| font-family: Arial, sans-serif; | |
| } | |
| #info { | |
| position: absolute; | |
| top: 10px; | |
| width: 100%; | |
| text-align: center; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="info">Dodecahedra Animation in WebGL<br/> | |
| <a href="https://websim.ai/mathshapes" style="color: #8af;">Explore More Mathematical Shapes</a> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| let scene, camera, renderer, dodecahedra = []; | |
| function init() { | |
| scene = new THREE.Scene(); | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| const geometry = new THREE.DodecahedronGeometry(0.5); | |
| const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 }); | |
| for (let i = 0; i < 20; i++) { | |
| const dodecahedron = new THREE.Mesh(geometry, material); | |
| dodecahedron.position.set( | |
| Math.random() * 8 - 4, | |
| Math.random() * 8 - 4, | |
| Math.random() * 8 - 4 | |
| ); | |
| scene.add(dodecahedron); | |
| dodecahedra.push(dodecahedron); | |
| } | |
| const light = new THREE.PointLight(0xffffff, 1, 100); | |
| light.position.set(0, 0, 10); | |
| scene.add(light); | |
| window.addEventListener('resize', onWindowResize, false); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| dodecahedra.forEach((d, index) => { | |
| d.rotation.x += 0.01 * (index % 3 + 1); | |
| d.rotation.y += 0.02 * (index % 3 + 1); | |
| d.position.y = Math.sin(Date.now() * 0.001 + index) * 2; | |
| }); | |
| renderer.render(scene, camera); | |
| } | |
| init(); | |
| animate(); | |
| </script> | |
| </body></html> |