threejs-textures

1# Three.js Textures
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();
16const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
17camera.position.set(0, 0, 2);
18 
19// Color images must be tagged sRGB or they render too bright and washed out
20const texture = new THREE.TextureLoader().load("diffuse.jpg");
21texture.colorSpace = THREE.SRGBColorSpace;
22 
23const mesh = new THREE.Mesh(
24  new THREE.PlaneGeometry(2, 2),
25  new THREE.MeshBasicMaterial({ map: texture }),
26);
27scene.add(mesh);
28 
29renderer.setAnimationLoop(animate);
30 
31function animate() {
32  mesh.rotation.z += 0.01;
33  renderer.render(scene, camera);
34}
35```
36 
37## Loading
38 
39```javascript
40// load() returns the texture at once; its image arrives asynchronously
41const texture = new THREE.TextureLoader().load("diffuse.jpg");
42texture.colorSpace = THREE.SRGBColorSpace;
43mesh.material.map = texture; // before the first render; afterwards also set mesh.material.needsUpdate = true
44 
45// When the next step needs the loaded image, await it
46const colorMap = await new THREE.TextureLoader().loadAsync("diffuse.jpg");
47colorMap.colorSpace = THREE.SRGBColorSpace;
48```
49…