r3f-materials

React Three Fiber materials

Inspect the installed renderer, Three.js, Fiber, and Drei versions first. Examples use Fiber 9 / React 19 with WebGL. Do not assume Drei shader-based materials work unchanged with WebGPU.

Choose the least complex material that fits

PBR surface with environment lighting

Mount below Canvas. This small procedural environment avoids a remote preset dependency.

import { Environment, Lightformer } from '@react-three/drei'
 
export default function Example() {
  return (
    <>

PBR and color decisions

• Use metalness near 0 for dielectrics and near 1 for bare metals; intermediate values usually describe mixtures or texture filtering. Roughness controls microsurface response, not opacity.
• Color/albedo and emissive textures use sRGB; roughness, metalness, normal, AO, and masks use NoColorSpace. Preserve correctly loaded glTF texture metadata.
• Maps multiply scalar settings: a metalness map with metalness={0} has no effect; an emissive map needs a nonblack emissive color.
• A normal map alters shading; a displacement map alters vertices and needs enough geometry subdivisions. Normal maps do not alter the silhouette.
• An emissive surface does not illuminate nearby geometry or automatically produce a halo. Add appropriate lighting and a bloom pipeline when those effects are required.
• PBR appearance changed across recent Three.js releases. Validate with controlled lighting/exposure; do not blindly compensate for an upgrade with extra lights or color conversion.

Transparency and glass

• opacity < 1 needs transparent for ordinary alpha blending. For cutout foliage or decals, consider alphaTest to avoid sorting artifacts; choose soft transparency only when required.
• depthWrite={false} can help some transparent layers but is not a universal fix. Test overlap order, backfaces, and intersection with opaque objects.
• Use physical transmission for glass, generally with opacity 1 and a meaningful thickness/IOR. Transmission is not equivalent to ordinary transparency.
• Drei MeshTransmissionMaterial and MeshReflectorMaterial add scene renders. Start with low resolution/samples, and measure before enabling backside passes or one independent buffer per object.
• A shared transmission sampler is cheaper in some scenes but cannot reproduce all visibility between transparent/transmissive objects. Read the helper's documentation before choosing it.
• Do not enable DoubleSide everywhere: it changes rendering cost and may hide incorrect winding or normals.

Lifetime and updates

• Share materials when objects should share appearance. Clone before changing one instance's color, maps, or uniforms; a cached glTF material may be used elsewhere.
• R3F owns declarative material children. Externally allocated/shared materials need explicit lifecycle ownership. Disposing a material does not dispose its textures.
• Animate ordinary material properties through typed refs. Value changes such as roughness or color do not require needsUpdate; shader feature changes such as adding/removing a map can require recompilation.
• Material arrays require matching geometry groups. An array alone does not assign arbitrary materials to faces.

Verify

Render under the intended lighting and output pipeline, then test transparent overlaps, shadows, and repeated mount/unmount. Compare GPU cost before adding transmission or reflection passes.

Sources

• MeshStandardMaterial, MeshPhysicalMaterial, Material.
• Drei transmission material, reflector material.
• Color management, Three.js migration guide.