threejs

What this skill does

# Three.js

## Overview

Three.js is a JavaScript library for creating interactive 3D graphics in the browser using WebGL. It provides a scene graph, PBR materials, lighting systems, model loaders (glTF, FBX), and performance tools like instanced rendering. React Three Fiber offers a declarative React integration with automatic resource management and Suspense-based loading.

## Instructions

- When setting up a scene, create a `Scene`, `PerspectiveCamera` (or `OrthographicCamera`), and `WebGLRenderer`, adding `OrbitControls` for mouse/touch interaction and configuring anti-aliasing and tone mapping for production quality.
- When creating objects, combine geometries (box, sphere, plane, or custom `BufferGeometry`) with materials (`MeshStandardMaterial` for PBR, `MeshPhysicalMaterial` for advanced effects) and apply texture maps for diffuse, normal, roughness, and metalness.
- When loading 3D models, use `GLTFLoader` for glTF/GLB files (the preferred web format), enable Draco compression for models over 1MB, and use KTX2 textures for GPU-compressed formats.
- When building lighting, combine ambient, directional, point, and spot lights with environment maps (HDR) for image-based lighting, and enable shadow maps on lights and meshes that need them.
- When optimizing performance, use `InstancedMesh` for rendering 100+ identical objects, merge static geometries, implement LOD for distance-based detail levels, and dispose resources manually when removing objects.
- When using React, prefer React Three Fiber with `@react-three/drei` helpers (OrbitControls, Environment, useGLTF) and `@react-three/postprocessing` for effects like bloom and SSAO.

## Examples

### Example 1: Build a 3D product configurator

**User request:** "Create a 3D product viewer where users can change colors and rotate the model"

**Actions:**
1. Load the product model with `useGLTF()` in React Three Fiber with Draco compression
2. Set up `OrbitControls` for rotation and zoom, with camera animation on option change
3. Create material swapping logic that updates `MeshStandardMaterial` color and roughness
4. Add environment lighting with an HDR map and contact shadows for realism

**Output:** An interactive 3D product configurator with color options, smooth rotation, and realistic lighting.

### Example 2: Create an animated data globe

**User request:** "Visualize global data points on an interactive 3D globe"

**Actions:**
1. Create a sphere geometry with an earth texture and atmosphere shader
2. Plot data points using `InstancedMesh` with thousands of small spheres at geographic coordinates
3. Add arc connections between points using `TubeGeometry` with animated dash offsets
4. Implement auto-rotation with mouse-override orbit controls

**Output:** A 3D globe with data point markers, animated connection arcs, and interactive rotation.

## Guidelines

- Use glTF/GLB format for all 3D models since it is the most efficient and widely supported web format.
- Enable Draco compression for models over 1MB to reduce file size significantly.
- Use `InstancedMesh` when rendering more than 100 identical objects for massive performance gains.
- Set `antialias: true` and `toneMapping: ACESFilmicToneMapping` for production visual quality.
- Use React Three Fiber for React apps for declarative scene management and automatic disposal.
- Dispose resources manually when removing objects: `geometry.dispose()`, `material.dispose()`, `texture.dispose()`.
- Test on mobile devices and reduce shadow resolution, pixel ratio, and material complexity for low-end GPUs.