Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Three.js Scene and Animation Example</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://threejs.org/build/three.min.js"></script> | |
| <script> | |
| // Set up the scene, camera, and renderer | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| // Create a cube geometry and material | |
| const geometry = new THREE.BoxGeometry(); | |
| const material = new THREE.MeshBasicMaterial({ color: 0xffffff }); | |
| // Create a cube mesh and add it to the scene | |
| const cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| // Set up animation loop | |
| const animate = function () { | |
| requestAnimationFrame(animate); | |
| // Rotate the cube | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| }; | |
| // Start the animation loop | |
| animate(); | |
| // Adjust camera position | |
| camera.position.z = 5; | |
| </script> | |
| </body> | |
| </html> | |