Agent skill · design visual · cloudai-x
threejs-fundamentals
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.
Why this skill is useful
Provides specific Three.js setup patterns and configuration examples that the AI wouldn't reliably generate on its own.
What it needs
Requires three installed locally. About 5k tokens when loaded. Last updated 2026-07-09. 2,926 stars on the source repository.
What this skill does
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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cloudai-x/threejs-fundamentals