threejs-skills
Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.
Best for 3D web developersWorks with GitHubLow risk
⌘source
- author
@sickn33- language
- Python
★34kstars
5.7kforks
Apr 22, 2026
✦overview.md
Key Features
- ·Create 3D scenes with Three.js
- ·Interactive 3D experiences
- ·WebGL rendering with best practices
- ·Use ES module import maps (r183+)
- ·OrbitControls for camera interaction
Use Cases
- →Building a rotating 3D product viewer
- →Creating an interactive data visualization in 3D space
- →Adding particle effects to a web page
- →Developing an explorable 3D scene for a game
Best for
- ✓3D web developers
- ✓interactive experience creators
- ✓data visualization projects
Not ideal for
- !static 2D graphics
- !non-browser environments
FAQs
name
threejs-skills
description
Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.
risk:safe
source:https://github.com/CloudAI-X/threejs-skills
date_added:2026-02-27
Three.js Skills
Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.
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
Core Setup Pattern
1. Essential Three.js Imports
Use ES module import maps for modern Three.js (r183+):
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
</script>
For production with npm/vite/webpack:
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
2. Scene Initialization
Every Three.js artifact needs these core components:
$install
1-click copynpx skills add sickn33/antigravity-awesome-skills --skill threejs-skillsSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
5/ 5
excellentVery clear and well structured, with almost no room for misunderstanding.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
5/ 5
very highHighly actionable with clear, concrete steps that an agent can follow directly.