threejs-webgl

Comprehensive guidance for Three.js 3D web development across both WebGL and WebGPU, aimed at building interactive scenes, product configurators, data visualizations, and immersive experiences. It grounds the reader in Three.js's scene-graph architecture and the essential components every application needs: a scene, a camera, a renderer, geometry, materials, and meshes.

Quick-start patterns show a complete WebGL scene, including a perspective camera, an antialiased renderer with shadow maps, ambient and directional lighting, OrbitControls with damping, an animation loop, and resize handling, alongside a modern WebGPU alternative via three/webgpu with tone mapping and a set animation loop. From there, common patterns cover building meshes with standard and textured materials, lighting strategies such as three-point setups, physically based point lights specified in lumens, and hemisphere lighting, and InstancedMesh for rendering thousands of similar objects efficiently with per-instance matrices and colors.

Model loading is handled with GLTFLoader plus DRACOLoader for compressed geometry, including traversing the scene to enable shadows and driving glTF animation clips through an AnimationMixer. Additional sections detail shadow configuration, covering soft shadow map types, shadow map resolution, and the light's shadow-camera frustum, and raycasting for pointer interaction by converting mouse coordinates to normalized device coordinates and intersecting scene objects. The breadth of copy-ready snippets makes it a practical reference for standing up performant, interactive 3D on the web.