Three.js Demos
Three.js Demos

Iridescence Thin-Film Materials (r183 roadmap)

Interactive `MeshPhysicalMaterial` lab that showcases angle-dependent thin-film color shifts with iridescence IOR and thickness controls.

Key topics: three.js iridescence, thin film, meshphysicalmaterial, pbr shading, r183

What this code does

- Thin-Film Shading: demonstrates `MeshPhysicalMaterial.iridescence` for angle-dependent spectral color response.
- IOR Controls: `iridescenceIOR` tuning changes how strongly hues separate across view angles.
- Thickness Range: nanometer-scale `iridescenceThicknessRange` values shift the visible interference palette.
- Preset Workflow: includes practical looks (soap bubble, titanium oxide, oil slick, coated glass) for fast exploration.
- Multi-Angle Layout: four synchronized spheres make view-angle differences clear without constant camera movement.
- Production Relevance: useful for coatings, films, and stylized materials requiring controlled interference highlights.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'

const film = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  iridescence: 1,
  iridescenceIOR: 1.45,
  iridescenceThicknessRange: [120, 900],
  roughness: 0.2,
  metalness: 0.25
})

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