Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

Three.js Fundamentals Quick Start Core Classes Scene Container for all 3D objects, lights, and cameras. Cameras PerspectiveCamera Most common, simulates human eye. OrthographicCamera No perspective distortion, good for 2D/isometric. ArrayCamera Multiple viewports with sub cameras. CubeCamera Renders environment maps for reflections. WebGLRenderer Object3D Base class for all 3D objects. Mesh, Group, Light, Camera all extend Object3D. Group Empty container for organizing objects. Mesh Combines geometry and material. Coordinate System Three.js uses a right handed coordinate system : +X points right +Y points up +Z points toward viewer (out of screen) Math Utilities Vector3 Matrix4 Quaternion Euler Color MathUtils Common Patterns Proper Cleanup Clock for Animation Responsive Canvas Loading Manager Performance Tips 1. Limit draw calls : Merge geometries, use instancing, atlas textures 2. Frustum culling : Enabled by default, ensure bounding boxes are correct 3. LOD (Level of Detail) : Use THREE.LOD for distance based mesh switching 4. Object pooling : Reuse objects instead of creating/destroying 5. Avoid getWorldPosition in loops : Cache results See Also threejs geometry Geometry creation and manipulation threejs materials Material types and properties threejs lighting Light types and shadows

threejs-fundamentals