threejs-fundamentals

1# Three.js Fundamentals
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9 
10const renderer = new THREE.WebGLRenderer({ antialias: true });
11renderer.setPixelRatio(window.devicePixelRatio);
12renderer.setSize(window.innerWidth, window.innerHeight);
13document.body.appendChild(renderer.domElement);
14 
15const scene = new THREE.Scene();
16scene.background = new THREE.Color(0x111318);
17 
18const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
19camera.position.set(0, 1.5, 5);
20 
21const cube = new THREE.Mesh(
22  new THREE.BoxGeometry(1, 1, 1),
23  new THREE.MeshStandardMaterial({ color: 0x3a86ff }),
24);
25scene.add(cube);
26const light = new THREE.DirectionalLight(0xffffff, 2);
27light.position.set(3, 4, 5); // shines from its position toward the origin
28scene.add(light);
29scene.add(new THREE.AmbientLight(0xffffff, 0.4));
30 
31const timer = new THREE.Timer();
32timer.connect(document); // freezes the delta while the tab is hidden
33 
34function animate() {
35  timer.update(); // advance the timer first thing each frame
36  cube.rotation.y += timer.getDelta(); // seconds since the previous frame
37  renderer.render(scene, camera);
38}
39renderer.setAnimationLoop(animate);
40 
41window.addEventListener("resize", () => {
42  camera.aspect = window.innerWidth / window.innerHeight;
43  camera.updateProjectionMatrix();
44  renderer.setSize(window.innerWidth, window.innerHeight);
45});
46```
47…