Three.js Demos
Three.js Demos

Clearcoat + Anisotropy Lab (r183 roadmap)

Side-by-side physical material comparison that demonstrates brushed anisotropic highlights with a clearcoat layer versus a baseline PBR material.

Key topics: three.js clearcoat, anisotropy, meshphysicalmaterial, pbr materials, r183

What this code does

- Physical Material Focus: uses `MeshPhysicalMaterial` for advanced surface response beyond base metal/roughness.
- Side-by-Side Readability: baseline PBR sphere is shown next to a clearcoat + anisotropy sphere to make differences obvious.
- Anisotropy Behavior: directional highlight stretching is controlled via `anisotropy` and `anisotropyRotation`.
- Clearcoat Layering: `clearcoat` and `clearcoatRoughness` add a second glossy lobe over the base material.
- Live Environment Probe: dynamic cube camera capture drives `scene.environment` for time-varying reflections.
- Practical Use: useful for car paint, coated metals, brushed finishes, and manufactured product renders.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'

const material = new THREE.MeshPhysicalMaterial({
  color: 0xf2f6ff,
  metalness: 0.7,
  roughness: 0.35,
  anisotropy: 0.8,
  anisotropyRotation: 0.25,
  clearcoat: 0.9,
  clearcoatRoughness: 0.1
})

const mesh = new THREE.Mesh(
  new THREE.SphereGeometry(1, 64, 64),
  material
)
scene.environment = envMap
scene.add(mesh)
← Back