THREE.JS / FOUNDATIONS 186

Make reflections know the room.

A cubemap is captured from the floor, then the reflection ray is corrected against a room-sized box. Toggle the correction and move its bounds to see why a local probe matters.

Initializing —

Creating the dynamic cube environment and projected material graphs.

Backend: —
Cube target: —
Capture faces: 0
Draw calls: —

Default PMREMunprojected ray

Uses the captured cube environment without correcting the hit point against the room.

Node: pmremTexture()
Roughness: 0.25

Box projectedBPCEM

Feeds a parallax-corrected normal into the same PMREM environment node.

Node: getParallaxCorrectNormal()
Bounds: 160 × 80 × 100

Projection controls

Room width 160 Room height 80 Room depth 100 Roughness scale 0.25

Box projected Animate capture

BPCEM lifecycle

CubeCamera→PMREM→reflectVector→box correction

The probe captures the room once, then both materials read the same filtered environment.

No frame sample yet.

Derived from the pinned BPCEM example: CubeCamera → PMREM → getParallaxCorrectNormal() → MeshStandardNodeMaterial. Add ?forceWebGL=1 for the explicit WebGL2 compatibility lane. This lab uses deterministic procedural room textures and a bounded 128² target; exact official assets, Inspector/Stats presentation, pixel parity, broad device matrices, and whole-example fidelity remain separate.

Drag to orbit · change the room bounds · refresh the captured environment

Previous: texture gather →

LAB 186 / BOX PROJECTED CUBE ENVIRONMENT MAPPING