threejs_basic_scene_setup_with_rotating_cube_animation.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);
13camera.position.z = 5;
14
15// 3. Create the renderer
16const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
17renderer.setSize(window.innerWidth, window.innerHeight);
18document.body.appendChild(renderer.domElement);
19
20// 4. Add a basic object (a green cube)
21const geometry: THREE.BoxGeometry = new THREE.BoxGeometry(1, 1, 1);
22const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
23const cube: THREE.Mesh = new THREE.Mesh(geometry, material);
24scene.add(cube);
25
26// 5. Animation loop
27function animate(): void {
28    requestAnimationFrame(animate);
29
30    // Rotate the cube for some movement
31    cube.rotation.x += 0.01;
32    cube.rotation.y += 0.01;
33
34    renderer.render(scene, camera);
35}
36
37// Handle window resizing
38window.addEventListener('resize', () => {
39    camera.aspect = window.innerWidth / window.innerHeight;
40    camera.updateProjectionMatrix();
41    renderer.setSize(window.innerWidth, window.innerHeight);
42});
43
44animate();