Spaces:
Running
Running
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <div id="cube-container"></div> | |
| #cube-container { | |
| width: 100%; | |
| height: 400px; | |
| position: relative; | |
| margin-top: 20px; | |
| } | |
| Java | |
| // scripts.js | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set up the scene, camera, and renderer as global variables. | |
| var scene, camera, renderer, cube; | |
| init(); | |
| function init() { | |
| // Add the scene. | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0xf4f4f4); | |
| // Add the camera. | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Add the renderer. | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.getElementById('cube-container').appendChild(renderer.domElement); | |
| // Add the cube. | |
| var geometry = new THREE.BoxGeometry(2, 2, 2); | |
| var material = new THREE.MeshBasicMaterial({ color: 0x007bff, wireframe: false }); | |
| cube = new THREE.Mesh(geometry, material); | |
| scene.add(cube); | |
| // Render the scene/camera combination. | |
| render(); | |
| } | |
| function render() { | |
| requestAnimationFrame(render); | |
| // Rotate the cube. | |
| cube.rotation.x += |