threejs_basic_rotating_cube_scene_with_animation_loop.ts

1import * as THREE from 'three';
2
3// 1. Create the scene
4const scene: THREE.Scene = new THREE.Scene();
5
6// 2. Create the camera (Field of View, Aspect Ratio, Near Clipping Plane, Far Clipping Plane)
7const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(
8  75,
9  window.innerWidth / window.innerHeight,
10  0.1,
11  1000
12);
13
14// 3. Create the renderer and add it to the DOM
15const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
16renderer.setSize(window.innerWidth, window.innerHeight);
17document.body.appendChild(renderer.domElement);
18
19// 4. Create a geometry (the shape) and a material (the look)
20const geometry: THREE.BoxGeometry = new THREE.BoxGeometry(1, 1, 1);
21const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
22
23// 5. Create a Mesh (geometry + material) and add it to the scene
24const cube: THREE.Mesh = new THREE.Mesh(geometry, material);
25scene.add(cube);
26
27// Position the camera so it is not inside the cube
28camera.position.z = 5;
29
30// 6. Create an animation loop to render the scene
31function animate(): void {
32  requestAnimationFrame(animate);
33
34  // Rotate the cube
35  cube.rotation.x += 0.01;
36  cube.rotation.y += 0.01;
37
38  renderer.render(scene, camera);
39}
40
41animate();