SKILL.md
Three.js Skills
Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.
Detailed Guide
Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
- Requests 3D visualizations or graphics ("create a 3D model", "show in 3D")
- Wants interactive 3D experiences ("rotating cube", "explorable scene")
- Needs WebGL or canvas-based rendering
- Asks for animations, particles, or visual effects
- Mentions Three.js, WebGL, or 3D rendering
- Wants to visualize data in 3D space
Example Workflow
User: "Create an interactive 3D sphere that responds to mouse movement"
- Setup: Import Three.js, create scene/camera/renderer
- Geometry: Create
SphereGeometry(1, 32, 32)for smooth sphere - Material: Use
MeshStandardMaterialfor realistic look - Lighting: Add ambient + directional lights
- Interaction: Track mouse position, update camera
- Animation: Rotate sphere, render continuously
- Responsive: Add window resize handler
- Result: Smooth, interactive 3D sphere ✓
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.