threejs-builder

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

1. Wave/bobbing motion:

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

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