threejs-fundamentals_skill

Overview

This skill teaches core Three.js scene setup and transform fundamentals for building interactive 3D web apps. It covers scene composition, camera types, renderer configuration, Object3D hierarchy, and coordinate/math utilities. Use it to get a correct, performant baseline for any Three.js project.

How this skill works

It explains how to create and configure a Scene, add lights and meshes, and wire a WebGLRenderer with responsive resizing and tone mapping. It describes camera options (Perspective, Orthographic, Array, Cube) and when to use them, plus how to manage object transforms, parent/child hierarchies, and world vs local coordinates. Math utilities (Vector3, Matrix4, Quaternion, Euler, Color, MathUtils) and common patterns like animation clocks, loading managers, and cleanup are also covered.

When to use it

• Setting up a new Three.js scene and render loop
• Choosing and configuring cameras for perspective or orthographic views
• Managing Object3D transforms, parenting, and traversal
• Configuring renderer settings, tone mapping, and color space
• Optimizing scene performance and cleanup workflows

Best practices

• Keep a single render loop and use THREE.Clock for consistent animation timing
• Use groups and Object3D hierarchy to transform collections instead of individual objects
• Dispose geometries, materials, and textures when removing objects to avoid memory leaks
• Limit draw calls via merged geometries, instancing, or texture atlases
• Use responsive resize handlers to update camera.aspect and renderer size and pixel ratio

Example use cases

• Quick start template that creates scene, camera, renderer, lights, and an animated mesh
• Switching between PerspectiveCamera and OrthographicCamera for gameplay vs UI rendering
• Using CubeCamera to generate realtime environment maps for reflective materials
• Organizing scene content with Group and LOD for performance tuning
• Implementing a LoadingManager for coordinated asset loading and progress UI