r3f-materials

React Three Fiber Materials Quick Start import { Canvas } from '@react-three/fiber'

function Scene() { return (

  <mesh>
    <boxGeometry />
    <meshStandardMaterial
      color="hotpink"
      roughness={0.5}
      metalness={0.5}
    />
  </mesh>
</Canvas>

) }

Material Types Overview Material Use Case Lighting meshBasicMaterial Unlit, flat colors No meshLambertMaterial Matte surfaces, fast Yes (diffuse) meshPhongMaterial Shiny, specular Yes meshStandardMaterial PBR, realistic Yes (PBR) meshPhysicalMaterial Advanced PBR Yes (PBR+) meshToonMaterial Cel-shaded Yes (toon) meshNormalMaterial Debug normals No shaderMaterial Custom GLSL Custom meshBasicMaterial

No lighting calculations. Always visible, fast.

meshStandardMaterial (PBR)

Physically-based rendering. Recommended for realistic results.

import { useTexture } from '@react-three/drei' import * as THREE from 'three'

function PBRMesh() { // Load PBR texture set const [colorMap, normalMap, roughnessMap, metalnessMap, aoMap] = useTexture([ '/textures/color.jpg', '/textures/normal.jpg', '/textures/roughness.jpg', '/textures/metalness.jpg', '/textures/ao.jpg', ])

return ( <meshStandardMaterial // Base color color="#ffffff" map={colorMap}

    // PBR properties
    roughness={1}         // 0 = mirror, 1 = diffuse
    roughnessMap={roughnessMap}
    metalness={0}         // 0 = dielectric, 1 = metal
    metalnessMap={metalnessMap}

    // Surface detail
    normalMap={normalMap}
    normalScale={[1, 1]}

    // Ambient occlusion (requires uv2)
    aoMap={aoMap}
    aoMapIntensity={1}

    // Emissive
    emissive="#000000"
    emissiveIntensity={1}
    emissiveMap={emissiveTexture}

    // Environment
    envMap={envTexture}
    envMapIntensity={1}

    // Other
    flatShading={false}
    fog={true}
    transparent={false}
  />
</mesh>

) }

meshPhysicalMaterial (Advanced PBR)

Extends Standard with clearcoat, transmission, sheen, etc.

// Glass material function Glass() { return ( ) }

// Car paint function CarPaint() { return ( ) }

// Fabric/velvet (sheen) function Fabric() { return ( ) }

// Iridescent (soap bubbles) function Iridescent() { return ( ) }

Drei Special Materials MeshReflectorMaterial

Realistic mirror-like reflections.

import { MeshReflectorMaterial } from '@react-three/drei'

function ReflectiveFloor() { return ( ) }

MeshWobbleMaterial

Animated wobble effect.

import { MeshWobbleMaterial } from '@react-three/drei'

function WobblyMesh() { return ( ) }

MeshDistortMaterial

Perlin noise distortion.

import { MeshDistortMaterial } from '@react-three/drei'

function DistortedMesh() { return ( ) }

MeshTransmissionMaterial

Better glass/refractive materials.

import { MeshTransmissionMaterial } from '@react-three/drei'

function GlassSphere() { return ( ) }

MeshDiscardMaterial

Discard fragments - useful for shadows only.

import { MeshDiscardMaterial } from '@react-three/drei'

function ShadowOnlyMesh() { return ( {/ Invisible but casts shadows /} ) }

Points and Lines Materials // Points material

// Line materials

Common Material Properties

All materials share these base properties:

<meshStandardMaterial // Visibility visible={true} transparent={false} opacity={1} alphaTest={0} // Discard pixels with alpha < value

// Rendering side={THREE.FrontSide} // FrontSide, BackSide, DoubleSide depthTest={true} depthWrite={true} colorWrite={true}

// Blending blending={THREE.NormalBlending} // NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending

// Polygon offset (z-fighting fix) polygonOffset={false} polygonOffsetFactor={0} polygonOffsetUnits={0}

// Misc dithering={false} toneMapped={true} />

Dynamic Materials Updating Material Properties import { useRef } from 'react' import { useFrame } from '@react-three/fiber'

function AnimatedMaterial() { const materialRef = useRef()

useFrame(({ clock }) => { const t = clock.elapsedTime

// Update color
materialRef.current.color.setHSL((t * 0.1) % 1, 1, 0.5)

// Update properties
materialRef.current.roughness = (Math.sin(t) + 1) / 2

})

return ( ) }

Shared Materials import { useMemo } from 'react' import * as THREE from 'three'

function SharedMaterial() { // Create once, use many times const material = useMemo(() => new THREE.MeshStandardMaterial({ color: 'red' }), [])

return ( <> </> ) }

Multiple Materials // Different materials per face (BoxGeometry has 6 material groups) {/ +X /} {/ -X /} {/ +Y /} {/ -Y /} {/ +Z /} {/ -Z /}

Material with Textures import { useTexture } from '@react-three/drei' import * as THREE from 'three'

function TexturedMaterial() { // Named object pattern (recommended) const textures = useTexture({ map: '/textures/color.jpg', normalMap: '/textures/normal.jpg', roughnessMap: '/textures/roughness.jpg', })

// Set texture properties Object.values(textures).forEach(texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(2, 2) })

return ( ) }

Emissive Materials (Glow) // For bloom effect, emissive colors should exceed normal range 1 for bloom toneMapped={false} // Required for colors > 1 />

// With emissive map

Environment Maps import { useEnvironment } from '@react-three/drei'

function EnvMappedMaterial() { const envMap = useEnvironment({ preset: 'sunset' })

return ( ) }

Custom Shader Materials

See r3f-shaders for detailed shader material usage.

import { shaderMaterial } from '@react-three/drei' import { extend } from '@react-three/fiber'

const CustomMaterial = shaderMaterial( { time: 0, color: new THREE.Color('hotpink') }, // Vertex shader varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }, // Fragment shader uniform float time; uniform vec3 color; varying vec2 vUv; void main() { gl_FragColor = vec4(color * (sin(time + vUv.x * 10.0) * 0.5 + 0.5), 1.0); } )

extend({ CustomMaterial })

function CustomShaderMesh() { const materialRef = useRef()

useFrame(({ clock }) => { materialRef.current.time = clock.elapsedTime })

return ( ) }

Performance Tips Reuse materials: Same material instance = batched draw calls Avoid transparent: Requires sorting, slower Use alphaTest over transparent: When possible, faster Simpler materials: Basic > Lambert > Phong > Standard > Physical Limit texture sizes: 1024-2048 usually sufficient // Material caching pattern const materialCache = new Map()

function getCachedMaterial(color) { const key = color.toString() if (!materialCache.has(key)) { materialCache.set(key, new THREE.MeshStandardMaterial({ color })) } return materialCache.get(key) }

See Also r3f-textures - Texture loading and configuration r3f-shaders - Custom shader development r3f-lighting - Light interaction with materials