threejs-materials

1# Three.js Materials
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();
16 
17const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
18camera.position.set(0, 0, 3);
19 
20// PBR material - the default choice for lit, realistic surfaces
21const material = new THREE.MeshStandardMaterial({
22  color: 0x00aaff,
23  roughness: 0.35,
24  metalness: 0.1,
25});
26const mesh = new THREE.Mesh(new THREE.SphereGeometry(1, 48, 32), material);
27scene.add(mesh);
28scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1)); // lit materials render black without lights
29const light = new THREE.DirectionalLight(0xffffff, 2);
30light.position.set(3, 3, 3);
31scene.add(light);
32 
33function animate() {
34  mesh.rotation.y += 0.01;
35  renderer.render(scene, camera);
36}
37 
38renderer.setAnimationLoop(animate);
39```
40 
41## Material Types Overview
42 
43| Material | Use case | Lighting |
44| -------------------- | ------------------------------------- | ------------------ |
45| MeshBasicMaterial | Unlit color, textures, wireframes | None |
46| MeshLambertMaterial | Matte diffuse surfaces | Diffuse |
47…