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.