Three.js Demos A collection of Three.js Demos

Environment Map (HDRI)

Real-time reflections using cube camera and procedural skybox.

What this code does

- Cube Camera: captures 360° reflections from the scene for realistic environmental reflections.
- Dynamic Reflections: real-time cube render target updates every frame for accurate reflections.
- PBR Materials: physically based rendering with metalness and roughness controls.
- Tone Mapping: ACES filmic tone mapping for realistic HDR lighting response.
- Procedural Sky: gradient shader creates dynamic sky colors without texture files.
- Material Presets: chrome, brushed metal, glass, and plastic material configurations.

JavaScript (plain)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 0, 5)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1.0
document.querySelector('#app').appendChild(renderer.domElement)

// Create cube environment map
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(512)
const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget)

// Create reflective sphere
const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshStandardMaterial({
  metalness: 1.0,
  roughness: 0.0,
  envMap: cubeRenderTarget.texture,
  envMapIntensity: 1.0
})
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)

function animate() {
  requestAnimationFrame(animate)
  cubeCamera.update(renderer, scene)
  renderer.render(scene, camera)
}
animate()
← Back