Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Three.js Builder · aiskillstore | DecimalAI

aiskillstore/threejs-builder

SkillScore91Maintained

Creates simple Three.js web apps with scene setup, lighting, geometries, materials, animations, and responsive rendering. Use for: "Create a threejs scene/app/showcase" or when user wants 3D web content. Supports ES modules, modern Three.js r150+ APIs.

Frontendby aiskillstore

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/aiskillstore-threejs-builder/SKILL.md

decimalai skills pull aiskillstore-threejs-builder --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-threejs-builder/SKILL.md https://app.decimal.ai/s/aiskillstore-threejs-builder/SKILL.md

Raw file: /s/aiskillstore-threejs-builder/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-threejs-builder.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 18d ago

Yes — +5% lift · at higher cost+95% tokens0% turns91% of whole cases pass with skill (20/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	60%	0%
case-03	✓→✓	＝ Same ✓	48%	0%
case-04	✓→✓	＝ Same ✓	358%	0%
case-05	✓→✓	＝ Same ✓	162%	0%
case-06	✓→✓	＝ Same ✓	60%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

aiskillstore / marketplace

skills/cesaraugustusgrob/threejs-builder/SKILL.md

View on GitHub ↗

Imported 8/10/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

Three.js Builder

A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.

Philosophy: The Scene Graph Mental Model

Three.js is built on the scene graph—a hierarchical tree of objects where parent transformations affect children. Understanding this mental model is key to effective 3D web development.

Before creating a Three.js app, ask:

What is the core visual element? (geometry, shape, model)
What interaction does the user need? (none, orbit controls, custom input)
What performance constraints exist? (mobile, desktop, WebGL capabilities)
What animation brings it to life? (rotation, movement, transitions)

Core principles:

Scene Graph First: Everything added to scene renders. Use Group for hierarchical transforms.
Primitives as Building Blocks: Built-in geometries (Box, Sphere, Torus) cover 80% of simple use cases.
Animation as Transformation: Change position/rotation/scale over time using requestAnimationFrame or renderer.setAnimationLoop.
Performance Through Simplicity: Fewer objects, fewer draw calls, reusable geometries/materials.

Quick Start: Essential Setup

Minimal HTML Template

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js App</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';

        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        document.body.appendChild(renderer.domElement);

        // Your 3D content here
        // ...

        camera.position.z = 5;

        // Animation loop
        renderer.setAnimationLoop((time) => {
            renderer.render(scene, camera);
        });

        // Handle resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

Geometries

Built-in primitives cover most simple app needs. Use BufferGeometry only for custom shapes.

Common primitives:

BoxGeometry(width, height, depth) - cubes, boxes
SphereGeometry(radius, widthSegments, heightSegments) - balls, planets
CylinderGeometry(radiusTop, radiusBottom, height) - tubes, cylinders
TorusGeometry(radius, tube) - donuts, rings
PlaneGeometry(width, height) - floors, walls, backgrounds
ConeGeometry(radius, height) - spikes, cones
IcosahedronGeometry(radius, detail) - low-poly spheres (detail=0)

Usage:

javascript
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Materials

Choose material based on lighting needs and visual style.

Material selection guide:

MeshBasicMaterial - No lighting, flat colors. Use for: UI, wireframes, unlit effects
MeshStandardMaterial - PBR lighting. Default for realistic surfaces
MeshPhysicalMaterial - Advanced PBR with clearcoat, transmission. Glass, water
MeshNormalMaterial - Debug, rainbow colors based on normals
MeshPhongMaterial - Legacy, shininess control. Faster than Standard

Common material properties:

javascript
{
    color: 0x44aa88,           // Hex color
    roughness: 0.5,            // 0=glossy, 1=matte (Standard/Physical)
    metalness: 0.0,            // 0=non-metal, 1=metal (Standard/Physical)
    emissive: 0x000000,        // Self-illumination color
    wireframe: false,          // Show edges only
    transparent: false,        // Enable transparency
    opacity: 1.0,              // 0=invisible, 1=opaque (needs transparent:true)
    side: THREE.FrontSide      // FrontSide, BackSide, DoubleSide
}

Lighting

No light = black screen (except BasicMaterial/NormalMaterial).

Light types:

AmbientLight(intensity) - Base illumination everywhere. Use 0.3-0.5
DirectionalLight(color, intensity) - Sun-like, parallel rays. Cast shadows
PointLight(color, intensity, distance) - Light bulb, emits in all directions
SpotLight(color, intensity, angle, penumbra) - Flashlight, cone of light

Typical lighting setup:

javascript
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);

const fillLight = new THREE.DirectionalLight(0x88ccff, 0.5);
fillLight.position.set(-5, 0, -5);
scene.add(fillLight);

Shadows (advanced, use when needed):

javascript
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

mainLight.castShadow = true;
mainLight.shadow.mapSize.width = 2048;
mainLight.shadow.mapSize.height = 2048;

mesh.castShadow = true;
mesh.receiveShadow = true;

Animation

Transform objects over time using the animation loop.

Animation patterns:

Continuous rotation:

javascript
renderer.setAnimationLoop((time) => {
    mesh.rotation.x = time * 0.001;
    mesh.rotation.y = time * 0.0005;
    renderer.render(scene, camera);
});

Wave/bobbing motion:

javascript
renderer.setAnimationLoop((time) => {
    mesh.position.y = Math.sin(time * 0.002) * 0.5;
    renderer.render(scene, camera);
});

Mouse interaction:

javascript
const mouse = new THREE.Vector2();

window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

renderer.setAnimationLoop(() => {
    mesh.rotation.x = mouse.y * 0.5;
    mesh.rotation.y = mouse.x * 0.5;
    renderer.render(scene, camera);
});

Camera Controls

Import OrbitControls from examples for interactive camera movement:

html
<script type="module">
    import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
    import { OrbitControls } from 'https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js';

    // ... scene setup ...

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    renderer.setAnimationLoop(() => {
        controls.update();
        renderer.render(scene, camera);
    });
</script>

Common Scene Patterns

Rotating Cube (Hello World)

javascript
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

renderer.setAnimationLoop((time) => {
    cube.rotation.x = time * 0.001;
    cube.rotation.y = time * 0.001;
    renderer.render(scene, camera);
});

Floating Particle Field

javascript
const particleCount = 1000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount * 3; i += 3) {
    positions[i] = (Math.random() - 0.5) * 50;
    positions[i + 1] = (Math.random() - 0.5) * 50;
    positions[i + 2] = (Math.random() - 0.5) * 50;
}

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
const particles = new THREE.Points(geometry, material);
scene.add(particles);

Animated Background with Foreground Object

javascript
// Background grid
const gridHelper = new THREE.GridHelper(50, 50, 0x444444, 0x222222);
scene.add(gridHelper);

// Foreground object
const mainGeometry = new THREE.IcosahedronGeometry(1, 0);
const mainMaterial = new THREE.MeshStandardMaterial({
    color: 0xff6600,
    flatShading: true
});
const mainMesh = new THREE.Mesh(mainGeometry, mainMaterial);
scene.add(mainMesh);

Colors

Three.js uses hexadecimal color format: 0xRRGGBB

Common hex colors:

Black: 0x000000, White: 0xffffff
Red: 0xff0000, Green: 0x00ff00, Blue: 0x0000ff
Cyan: 0x00ffff, Magenta: 0xff00ff, Yellow: 0xffff00
Orange: 0xff8800, Purple: 0x8800ff, Pink: 0xff0088

Anti-Patterns to Avoid

Basic Setup Mistakes

❌ Not importing OrbitControls from correct path Why bad: Controls won't load, THREE.OrbitControls is undefined in modern Three.js Better: Use import { OrbitControls } from 'three/addons/controls/OrbitControls.js' or unpkg examples/jsm path

❌ Forgetting to add object to scene Why bad: Object won't render, silent failure Better: Always call scene.add(object) after creating meshes/lights

❌ Using old requestAnimationFrame pattern instead of setAnimationLoop Why bad: More verbose, doesn't handle XR/WebXR automatically Better: renderer.setAnimationLoop((time) => { ... })

Performance Issues

❌ Creating new geometries in animation loop Why bad: Massive memory allocation, frame rate collapse Better: Create geometry once, reuse it. Transform only position/rotation/scale

❌ Using too many segments on primitives Why bad: Unnecessary vertices, GPU overhead Better: Default segments are usually fine. SphereGeometry(1, 32, 16) not SphereGeometry(1, 128, 64)

❌ Not setting pixelRatio cap Why bad: 4K/5K displays run at full resolution, poor performance Better: Math.min(window.devicePixelRatio, 2)

Code Organization

❌ Everything in one giant function Why bad: Hard to modify, hard to debug Better: Separate setup into functions: createScene(), createLights(), createMeshes()

❌ Hardcoding all values Why bad: Difficult to tweak and experiment Better: Define constants at top: const CONFIG = { color: 0x00ff88, speed: 0.001 }

Variation Guidance

IMPORTANT: Each Three.js app should feel unique and context-appropriate.

Vary by scenario:

Portfolio/showcase: Elegant, smooth animations, muted colors
Game/interactive: Bright colors, snappy controls, particle effects
Data visualization: Clean lines, grid helpers, clear labels
Background effect: Subtle, slow movement, dark/gradient backgrounds
Product viewer: Realistic lighting, PBR materials, smooth orbit

Vary visual elements:

Geometry choice: Not everything needs to be a cube. Explore spheres, tori, icosahedra
Material style: Mix flat shaded, glossy, metallic, wireframe
Color palettes: Use complementary, analogous, or monochromatic schemes
Animation style: Rotation, oscillation, wave motion, mouse tracking

Avoid converging on:

Default green cube as first example every time
Same camera angle (front-facing, z=5)
Identical lighting setup (always directional light at 1,1,1)

Remember

Three.js is a tool for interactive 3D on the web.

Effective Three.js apps:

Start with the scene graph mental model
Use primitives as building blocks
Keep animations simple and performant
Vary visual style based on purpose
Import from modern ES module paths

Modern Three.js (r150+) uses ES modules from three package or CDN. CommonJS patterns and global THREE variable are legacy.

For advanced topics (GLTF models, shaders, post-processing), see references/advanced-topics.md.

Claude is capable of creating elegant, performant 3D web experiences. These patterns guide the way—they don't limit the result.

Illustrative Want to see what aiskillstore/threejs-builder would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/4/2026, 03:53 UTC · 22 cases

Lift

+5%

91% vs 86%

Agent turns

1.0 vs 1.0

Tokens

+95%

6,225.14 vs 3,190.18

fail → pass · 1pass → pass · 19fail → fail · 2

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 Can you build me a complete, standalone HTML page featuring an interactive 3D product viewer using modern Three.js ES modules? I want a glossy, metallic donut object centered in the scene with ambient and directional lighting to highlight its material reflections. The user should be able to rotate and zoom around the scene using smooth camera controls, and the viewport must automatically adjust whenever the browser window is resized.	fail→pass	35,231	51,603	+46%	1	1	0%	7,030	11,263	+60%	0	0	—
case-02 I need a full single-file WebGL web application that acts as an animated 3D background for a tech landing page. It should display a swarm of floating light particles and geometric shapes subtly floating across space on a dark canvas. Please implement a performant continuous frame update loop, proper canvas styling to fill the entire browser screen, and sensible handling for device display densities.	fail→fail	46,873	45,116	-4%	1	1	0%	8,264	11,693	+41%	0	0	—
case-03 I am building a web interface and need a pure CSS 3D flip card component for a user profile card. Please generate an HTML snippet with embedded CSS using standard CSS custom properties, keyframe animations, and `transform-style: preserve-3d` so that hovering or toggling flips the card in 3D space. Do not import any external JavaScript rendering libraries or WebGL frameworks.	pass→pass	59,480	31,073	-48%	1	1	0%	6,178	9,134	+48%	0	0	—
case-04 I am developing a modern browser application using raw WebGPU via `navigator.gpu`. I need a standalone WGSL shader code snippet defining vertex and fragment shader stages. The vertex shader should transform position attributes using a uniforms matrix, and the fragment shader should output RGBA color values. Provide only native WGSL shader source code without relying on any high-level JavaScript 3D engine wrappers.	pass→pass	12,196	17,328	+42%	1	1	0%	1,297	5,942	+358%	0	0	—
case-05 I need an HTML page containing an HTML5 `<canvas>` element and embedded vanilla JavaScript that uses the standard 2D rendering context (`canvas.getContext('2d')`) to render an animated bouncing ball with basic gravity and floor collision detection. Do not use 3D rendering engines, WebGL, or WebGL2 contexts.	pass→pass	21,362	35,619	+67%	1	1	0%	3,382	8,865	+162%	0	0	—
case-06 I am building an HTML page with a modern Three.js camera interaction system. I want to allow users to orbit, zoom, and pan around a central 3D mesh using camera controls. Show me the JavaScript setup script using standard ES module imports from CDN, making sure to avoid obsolete global `THREE` namespaces or legacy script tags.	pass→pass	22,178	24,397	+10%	1	1	0%	4,729	7,573	+60%	0	0	—
case-07 Write the boilerplate setup script for initializing a Three.js WebGLRenderer on a web page. I want the renderer to look crisp on high-DPI Apple Retina displays, but I need to prevent severe GPU performance degradation on ultra-high resolution 4K or 5K screens.	pass→pass	20,047	8,564	-57%	1	1	0%	2,907	5,049	+74%	0	0	—
case-08 Provide a JavaScript animation script for continuous rotation of a 3D mesh in a WebGL scene. Implement the standard modern animation loop mechanism recommended for Three.js web applications rather than legacy browser frame callbacks.	pass→pass	11,637	15,501	+33%	1	1	0%	2,397	5,920	+147%	0	0	—
case-09 I need a performance-optimized animation loop for a Three.js scene containing a pulsating mesh. Write the JavaScript code that modifies the mesh properties over time across frames while avoiding memory allocation bottlenecks and frame rate drops.	pass→pass	18,257	16,724	-8%	1	1	0%	3,352	6,545	+95%	0	0	—
case-10 Write a JavaScript snippet to create a standard spherical mesh representing a planet in a lightweight web application. Optimize the vertex density so the sphere looks smooth without cluttering the GPU with excessive default or sub-divided polycount.	pass→pass	17,316	13,436	-22%	1	1	0%	3,262	4,784	+47%	0	0	—
case-11 I am adding flat HUD overlay graphics and wireframe bounding boxes to a 3D web scene. I want these HUD elements to retain their exact specified hex color values regardless of scene lighting or shadow conditions. Which material should be instantiated in JavaScript for these unlit meshes?	pass→pass	13,764	4,423	-68%	1	1	0%	1,543	4,196	+172%	0	0	—
case-12 Write a JavaScript code snippet to create a translucent glass ornament mesh in Three.js with realistic physical properties such as clearcoat reflections and physical light transmission.	pass→pass	23,757	14,611	-38%	1	1	0%	3,345	5,960	+78%	0	0	—
case-13 Write a JavaScript function that constructs a simple 3D scene containing a directional light source and a standard cube mesh, preparing both for rendering.	pass→pass	17,185	15,711	-9%	1	1	0%	2,425	5,836	+141%	0	0	—
case-14 Write a JavaScript snippet that configures realistic dynamic shadows in a Three.js scene containing a directional sun light, a casting mesh, a receiving ground floor plane, and a WebGLRenderer.	pass→pass	20,500	11,481	-44%	1	1	0%	2,937	5,613	+91%	0	0	—
case-15 I want to rotate a 3D object based on mouse cursor movement across the browser window. Write the JavaScript event listener and animation logic that converts raw DOM mouse event positions into normalized device coordinates ranging from -1.0 to +1.0.	pass→pass	19,841	16,834	-15%	1	1	0%	2,998	5,798	+93%	0	0	—
case-16 I need to display a dense galaxy field of 1,000 floating star particles in a 3D web canvas. Write a performant JavaScript snippet that creates this particle system without instantiating 1,000 separate mesh instances.	pass→pass	26,578	10,454	-61%	1	1	0%	4,313	5,371	+25%	0	0	—
case-17 Write a JavaScript window resize event handler for a Three.js WebGL application that updates the camera aspect ratio and renderer dimensions when the browser window changes size.	pass→pass	12,142	5,334	-56%	1	1	0%	1,544	4,372	+183%	0	0	—
case-18 Write a JavaScript snippet creating a standard mesh material with a vibrant neon green color using native Three.js hexadecimal color notation.	pass→pass	9,455	4,596	-51%	1	1	0%	744	4,199	+464%	0	0	—
case-19 I am building a low-poly stylized planetary crystal in a 3D scene. Write a JavaScript snippet to instantiate the primitive geometry that produces flat-faceted low-poly sphere shapes efficiently.	fail→fail	17,506	14,667	-16%	1	1	0%	2,094	5,136	+145%	0	0	—
case-20 I created a scene with a MeshStandardMaterial mesh, but when I render it, the canvas is completely pitch black. Write the JavaScript setup code that adds essential ambient and directional lighting to make standard PBR materials visible.	pass→pass	13,656	9,807	-28%	1	1	0%	1,669	4,262	+155%	0	0	—
case-21 I need to render a clean 3D reference grid floor on the XZ plane of my WebGL scene. Write a JavaScript snippet that creates this visual grid object cleanly.	pass→pass	18,893	11,730	-38%	1	1	0%	2,384	4,633	+94%	0	0	—
case-22 Write the JavaScript setup code for configuring an interactive OrbitControls instance with camera movement damping and inertia, including the required render loop update step.	pass→pass	6,899	12,083	+75%	1	1	0%	1,390	4,809	+246%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +5 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 86.4%
Pass rate with the skill: 90.9%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 9/4/2026, 03:53 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

Can you build me a complete, standalone HTML page featuring an interactive 3D product viewer using modern Three.js ES modules? I want a glossy, metallic donut object centered in the scene with ambient and directional lighting to highlight its material reflections. The user should be able to rotate and zoom around the scene using smooth camera controls, and the viewport must automatically adjust whenever the browser window is resized.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run91

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+106% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 18 days ago

Other measured skills in the registry, with their headline benchmark lift.