About three
three is a skill for building browser-based 3D scenes with Three.js. It is aimed at developers creating WebGL visualizations, configuring cameras and lighting, loading assets, and animating scenes, with guidance on cleanup and performance choices.
Key features
- 01Browser 3D scene setup
- 02Camera and lighting configuration
- 03Model asset loading
- 04Time-based animation loops
- 05Resource cleanup and performance guidance
Use cases
- 01Starting a Three.js scene from the basic template
- 02Creating WebGL visualizations
- 03Loading GLTF/GLB models and animating them
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/threein Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
README.mdevals/evals.jsontemplates/basic-scene.htmlDetails
From the project READMEThree.js
Quick Start
Open templates/basic-scene.html in a modern browser or serve the repository over HTTP.
Use this skill for browser 3D scenes, WebGL visualization, camera and lighting setup, asset loading, or animation loops. Start with the smallest scene in templates/basic-scene.html, then add geometry, materials, lights, and controls only as required.
Core choices
- Use
PerspectiveCamerafor natural 3D views andOrthographicCamerafor technical or isometric views. - Keep animation time-based with
Clockor elapsed timestamps. - Dispose geometries, materials, and textures when scenes are replaced.
- Use GLTF/GLB for external models and keep assets local when reproducibility matters.
- Prefer instancing and level of detail when object count becomes the bottleneck.
The template uses a CDN for a quick standalone demo. Pin a Three.js version for production.