Three.js Scene Builder

Three.js Scene Builder enables your AI agent to construct rich 3D web experiences using the Three.js ecosystem, from simple geometry scenes to complex animated environments with physically based rendering.

Scene Setup

The skill correctly initializes the render loop with requestAnimationFrame, handles canvas resizing with proper device pixel ratio, and sets up a Scene, Camera, and WebGLRenderer with sensible defaults. It configures tone mapping and color space for physically correct rendering.

Lighting and Materials

Understands the difference between ambient, directional, point, and spot lights. Uses PBR materials (MeshStandardMaterial, MeshPhysicalMaterial) with appropriate roughness, metalness, and environment map settings. Generates proper HDR environment maps for realistic reflections.

GLTF and Asset Loading

Uses GLTFLoader with Draco compression support, handles async loading with LoadingManager, and extracts animations for use with AnimationMixer. Manages material overrides and instance meshes for performance.

Performance Optimization

Instances repeated geometry, disposes unused textures and geometries, uses LOD for distant objects, and leverages OffscreenCanvas for worker-based rendering.