Three.js Demos
Three.js Demos

Env IBL on Lambert vs Phong (r183)

Side-by-side material comparison showing environment-based lighting reflections on `MeshLambertMaterial` and `MeshPhongMaterial` using a live cubemap probe.

Key topics: three.js ibl, lambert material, phong material, scene.environment, r183

What this code does

- Global Environment Lighting: a live cube camera captures surrounding emissive objects and feeds `scene.environment`.
- Lambert + IBL: demonstrates how Lambert material now participates in environment lighting workflows.
- Phong + IBL: classic Phong model shown side-by-side as a reference for specular behavior.
- Real-Time Probe Update: rotating emitters continuously change reflected colors to make IBL response obvious.
- Intensity Control: GUI slider adjusts environment influence equally for both materials.
- Practical Use: useful for choosing legacy material models while still using modern image-based lighting setups.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'

const cubeRT = new THREE.WebGLCubeRenderTarget(256)
const cubeCamera = new THREE.CubeCamera(0.1, 100, cubeRT)

// Render environment probes from helper scene/objects.
cubeCamera.update(renderer, scene)

// Use the captured env map globally.
scene.environment = cubeRT.texture

const lambert = new THREE.Mesh(
  new THREE.SphereGeometry(0.85, 48, 48),
  new THREE.MeshLambertMaterial({ color: 0xffffff })
)
const phong = new THREE.Mesh(
  new THREE.SphereGeometry(0.85, 48, 48),
  new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 120 })
)
scene.add(lambert, phong)
← Back