Threejs Builder

Name: Threejs Builder
Author: chongdashu

chongdashu/cc-skills-nanobananapro

27 installs
139 repo stars
Updated December 25, 2025
chongdashu/cc-skills-nanobananapro

Create simple, performant Three.js web apps with scene setup, lighting, geometries, materials, and animation using modern ES modules.

About

Builds focused Three.js scenes using the scene-graph mental model, primitives, and requestAnimationFrame animation with r150+ APIs. Used when a developer wants 3D web content or a Three.js showcase.

Scene-graph-first mental model
Primitives, lighting, and responsive rendering

Threejs Builder by the numbers

27 all-time installs (skills.sh)
Ranked #1,483 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Jul 28, 2026 (Skillselion catalog sync)

npx skills add https://github.com/chongdashu/cc-skills-nanobananapro --skill threejs-builder

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/chongdashu/cc-skills-nanobananapro/threejs-builder.svg)](https://skillselion.com/skills/chongdashu/cc-skills-nanobananapro/threejs-builder)

Installs	27
repo stars	★ 139
Last updated	December 25, 2025
Repository	chongdashu/cc-skills-nanobananapro ↗

What it does

Create simple, performant Three.js web apps with scene setup, lighting, geometries, materials, and animation using modern ES modules.

Files

SKILL.mdMarkdownGitHub ↗

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:

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

---

Quick Start: Essential Setup

Minimal HTML Template

<!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:

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:

{
    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:

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):

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:

1. Continuous rotation:

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

2. Wave/bobbing motion:

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

3. Mouse interaction:

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:

<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)

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

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

// 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.

Advanced Three.js Topics

Progressive disclosure reference for topics beyond simple scenes.

---

Loading 3D Models (GLTF/GLB)

For loading external 3D models, use GLTFLoader from Three.js examples:

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

    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);
    document.body.appendChild(renderer.domElement);

    // Lighting for model
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 10, 7);
    scene.add(directionalLight);

    // Load model
    const loader = new GLTFLoader();
    loader.load(
        'path/to/model.glb',
        (gltf) => {
            scene.add(gltf.scene);
            camera.position.z = 5;

            // Auto-center and scale
            const box = new THREE.Box3().setFromObject(gltf.scene);
            const center = box.getCenter(new THREE.Vector3());
            const size = box.getSize(new THREE.Vector3());
            gltf.scene.position.sub(center);
            const maxDim = Math.max(size.x, size.y, size.z);
            camera.position.z = maxDim * 2;
        },
        (progress) => {
            console.log((progress.loaded / progress.total * 100) + '% loaded');
        },
        (error) => {
            console.error('An error happened', error);
        }
    );

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

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

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

---

Post-Processing (Bloom, Depth of Field)

For visual effects like bloom, use the EffectComposer:

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

    // Basic setup...
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.toneMapping = THREE.ReinhardToneMapping;

    // Post-processing
    const renderScene = new RenderPass(scene, camera);

    const bloomPass = new UnrealBloomPass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        1.5,  // strength
        0.4,  // radius
        0.85  // threshold
    );

    const composer = new EffectComposer(renderer);
    composer.addPass(renderScene);
    composer.addPass(bloomPass);

    renderer.setAnimationLoop(() => {
        composer.render();
    });
</script>

---

Custom Shaders (ShaderMaterial)

For custom visual effects, write GLSL shaders:

const vertexShader = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    uniform float time;
    varying vec2 vUv;
    void main() {
        vec3 color = 0.5 + 0.5 * cos(time + vUv.xyx + vec3(0, 2, 4));
        gl_FragColor = vec4(color, 1.0);
    }
`;

const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
        time: { value: 0 }
    }
});

renderer.setAnimationLoop((time) => {
    material.uniforms.time.value = time * 0.001;
    renderer.render(scene, camera);
});

---

Text and Sprites

For 2D text or labels in 3D space:

// Canvas-based text sprite
function createTextSprite(message, scale = 1) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 256;
    canvas.height = 64;

    context.fillStyle = 'rgba(0, 0, 0, 0)';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.font = 'Bold 24px Arial';
    context.fillStyle = 'white';
    context.textAlign = 'center';
    context.fillText(message, canvas.width / 2, canvas.height / 2);

    const texture = new THREE.CanvasTexture(canvas);
    const material = new THREE.SpriteMaterial({ map: texture });
    const sprite = new THREE.Sprite(material);
    sprite.scale.set(scale * 4, scale, 1);
    return sprite;
}

const label = createTextSprite('Hello Three.js!', 1);
label.position.set(0, 2, 0);
scene.add(label);

---

Raycasting (Mouse Picking)

For clicking/touching 3D objects:

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

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

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        const object = intersects[0].object;
        // Do something with clicked object
        object.material.color.setHex(Math.random() * 0xffffff);
    }
});

---

Environment Maps (Reflections)

For realistic reflections on metallic surfaces:

import { RGBELoader } from 'https://unpkg.com/three@0.160.0/examples/jsm/loaders/RGBELoader.js';

const rgbeLoader = new RGBELoader();
rgbeLoader.load('path/to/environment.hdr', (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
    scene.background = texture;
});

// Material with reflections
const material = new THREE.MeshStandardMaterial({
    color: 0x444444,
    metalness: 1,
    roughness: 0.1
});

---

InstancedMesh (Many Similar Objects)

For rendering thousands of identical objects efficiently:

const count = 1000;
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.InstancedMesh(geometry, material, count);

const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
    dummy.position.set(
        (Math.random() - 0.5) * 20,
        (Math.random() - 0.5) * 20,
        (Math.random() - 0.5) * 20
    );
    dummy.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);
}

scene.add(mesh);

---

Physics Integration (Cannon.js)

For physics-based interactions:

<script type="module">
    import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
    import * as CANNON from 'https://unpkg.com/cannon-es@0.20.0/dist/cannon-es.js';

    // Three.js setup
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Cannon.js world
    const world = new CANNON.World();
    world.gravity.set(0, -9.82, 0);

    // Sync mesh with physics body
    const geometry = new THREE.SphereGeometry(0.5);
    const material = new THREE.MeshStandardMaterial({ color: 0xff6600 });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    const body = new CANNON.Body({
        mass: 1,
        shape: new CANNON.Sphere(0.5),
        position: new CANNON.Vec3(0, 5, 0)
    });
    world.addBody(body);

    // Ground
    const groundBody = new CANNON.Body({
        type: CANNON.Body.STATIC,
        shape: new CANNON.Plane()
    });
    groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
    world.addBody(groundBody);

    const timeStep = 1 / 60;
    renderer.setAnimationLoop(() => {
        world.step(timeStep);
        mesh.position.copy(body.position);
        mesh.quaternion.copy(body.quaternion);
        renderer.render(scene, camera);
    });
</script>

---

Installation with npm

For production apps, install Three.js via npm:

npm install three

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Same API as CDN version

---

TypeScript Support

Three.js includes TypeScript definitions:

import * as THREE from 'three';

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

---

Key Module Import Paths (r160+)

// Core
import * as THREE from 'three';

// Addons (three/addons/ in npm, examples/jsm/ in CDN)
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

---

Performance Tips

1. Reuse geometries and materials: Create once, use many times 2. Use InstancedMesh: For 100+ identical objects 3. Limit shadow map resolution: 1024-2048 is usually sufficient 4. Disable antialiasing: For pixel art or performance-critical apps 5. Use frustum culling: Objects outside view are skipped (automatic) 6. Merge geometries: Combine static objects into one mesh 7. Use LOD (Level of Detail): Switch to simpler geometries at distance

// Geometry merging
const geometries = [];
for (let i = 0; i < 10; i++) {
    geometries.push(new THREE.BoxGeometry(1, 1, 1));
}
const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries);

---

Debug Helpers

// Grid helper
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

// Axes helper (RGB = XYZ)
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// Stats.js for performance monitoring
import Stats from 'https://unpkg.com/three@0.160.0/examples/jsm/libs/stats.module.js';
const stats = new Stats();
document.body.appendChild(stats.dom);

renderer.setAnimationLoop(() => {
    stats.begin();
    // render...
    stats.end();
});