threejs-skills

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"

1. Setup: Import Three.js, create scene/camera/renderer
2. Geometry: Create SphereGeometry(1, 32, 32) for smooth sphere
3. Material: Use MeshStandardMaterial for realistic look
4. Lighting: Add ambient + directional lights
5. Interaction: Track mouse position, update camera
6. Animation: Rotate sphere, render continuously
7. Responsive: Add window resize handler
8. 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.