Materials & Environment

Lesson 2

Materials define how a surface responds to light. MeshStandardMaterial is the physically-based workhorse — roughness and metalness control everything from matte plastic to chrome.

MeshStandardMaterial

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.9,
  roughness: 0.1,
});

Needs light to show anything. Add a point light:

const light = new THREE.PointLight(0xffffff, 2);
light.position.set(2, 3, 4);
scene.add(light);

Environment Map

An HDR environment map acts as an infinite light source and reflection source:

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

new RGBELoader().load('/hdr/studio.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;
});

What to Experiment With

  • Slide roughness 0→1: mirror → matte
  • Slide metalness 0→1: plastic → chrome
  • Try MeshPhysicalMaterial with transmission: 1, thickness: 0.5 for glass