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