Materials and lighting
Quick answer
This tutorial explains how MeshStandardMaterial responds to light through roughness and metalness, and why MeshBasicMaterial flattens terrain relief. It assembles a practical outdoor rig from HemisphereLight, a shadow-casting DirectionalLight and a weak fill light, with shadow map size, camera bounds and bias configured. It notes the physical light units introduced in r155 and the sRGB versus linear texture split. Readers can light a city model without washed-out colors or missing shadows.
Key points
- Keep metalness near zero for concrete, terrain and building surfaces.
- Tune point and spot light intensity in physical units after r155.
- Mark color textures sRGB but leave normal and roughness maps linear.
Example
const material = new THREE.MeshStandardMaterial({
color: 0x9aa7b4,
roughness: 0.85, // 粗糙，接近混凝土
metalness: 0.05, // 非金属
map: colorTexture, // 基础色贴图
normalMap: normalTexture,
side: THREE.FrontSide
});scene.add(new THREE.HemisphereLight(0xcfe4ff, 0x1a222c, 1.0));
const sun = new THREE.DirectionalLight(0xfff0d8, 2.4);
sun.position.set(8, 14, 6);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -30;
sun.shadow.camera.right = 30;
sun.shadow.camera.top = 30;
sun.shadow.camera.bottom = -30;
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 80;
sun.shadow.bias = -0.0005;
scene.add(sun);
const fill = new THREE.DirectionalLight(0x8fb4ff, 0.6);
fill.position.set(-10, 6, -8);
scene.add(fill);Notes
- Metalness of 1 without an environment map renders dark because metals lack diffuse light.
- Shadows need shadowMap.enabled plus matching castShadow and receiveShadow flags.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Materials and lighting. https://www.jingweizhi.com/en/three/tutorials/materials-lights.html (accessed 2026-11-03).