Spaces:
Running
Running
File size: 2,197 Bytes
bd9d750 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<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> |