Learning Three.js with AI: An Experiment

This is an experiment in learning. I'm documenting my experience using AI to learn Three.js as a complete beginner.

Below are some simple Three.js examples that Cloud Code generated. With some minor tweaks, I was able to get really good examples. Take a look below.

Version: 2.0.58 (Claude Code)

Model: opus 4.5 (Dec 2025)

Level 1: Hello Cube

What's rendered: A rotating wireframe cube using MeshBasicMaterial. This is the "Hello World" of Three.js - a minimal scene with a Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, and Mesh. The animation loop uses requestAnimationFrame to rotate the cube on each frame.

Level 2: Materials

What's rendered: Four spheres demonstrating different material types. Basic ignores lighting entirely. Lambert calculates diffuse (matte) reflections. Phong adds specular highlights for shininess. Standard uses physically-based rendering (PBR) with roughness and metalness properties for realistic appearance. Notice how Basic looks flat while the others respond to the directional light.

Level 3: Lighting

What's rendered: A white sphere on a floor with four toggleable light types. Ambient provides uniform base illumination. Directional simulates sunlight (parallel rays from infinity). Point radiates from a position like a light bulb (orbits the scene). Spot creates a focused cone beam. Shadows are enabled with PCFSoftShadowMap. Toggle lights to see how each contributes to the final image.

Level 4: Textures

What's rendered: Three cubes with procedurally-generated textures (no external image files). Checker uses CanvasTexture to create a pattern. Gradient applies a linear gradient as a color map. Noise + Bump combines a random noise texture with bumpMap to create surface detail that affects how light interacts with the geometry. All textures are created at runtime using the Canvas API.

Level 5: Loading a Model

What's rendered: A GLTF model loaded from an external URL using GLTFLoader. The classic "Duck" model from Khronos glTF-Sample-Models (via jsDelivr CDN) is fetched, auto-centered, and scaled to fit the viewport. GLTF (GL Transmission Format) is the standard for 3D models on the web - it's efficient, supports PBR materials, and can include animations. The triangle count shows the model's geometric complexity.

Level 6: Controls

What's rendered: An interactive scene using OrbitControls from Three.js addons. Drag to rotate the camera around the scene, scroll to zoom in/out, right-drag to pan. The controls use damping for smooth deceleration. Stats show camera position in spherical coordinates: distance from origin, azimuth (horizontal angle), and polar (vertical angle). Grid and axes helpers provide spatial reference.

Level 7: Animation

What's rendered: Four cubes demonstrating different animation techniques. Sine uses Math.sin() for smooth oscillation. Bounce applies easeOutBounce easing for a ball-drop effect. Elastic uses easeOutElastic for spring-like scaling. Keyframe interpolates between discrete positions. All animations are driven by THREE.Clock for consistent timing regardless of frame rate. Custom easing functions are implemented in pure JavaScript.

Level 8: Shaders

What's rendered: Three objects using custom GLSL shaders via ShaderMaterial. Wave Vertex modifies vertex positions in the vertex shader to create animated waves on a plane. Color Cycle calculates RGB values based on UV coordinates and time in the fragment shader. Noise Pattern implements value noise in GLSL for procedural texturing. Shaders run directly on the GPU, enabling effects impossible with standard materials.

Level 9: Post-Processing

What's rendered: A glowing torus knot with floating particles, enhanced by three post-processing effects from the postprocessing library. Bloom creates a glow around bright areas using luminance thresholding and mipmap blur. Vignette darkens the edges for a cinematic look. Film Grain adds subtle noise via overlay blending. Effects are applied via EffectComposer which renders the scene to a framebuffer, then applies shader passes. Toggle each effect to see its contribution.

Level 10: Instanced Rendering

What's rendered: Up to 50,000 animated icosahedrons using InstancedMesh. Each instance has unique position, rotation, scale, and color stored in per-instance attributes. The GPU renders all instances in a single draw call by reading transformation matrices from a buffer. Click the count buttons to see how performance scales. This technique is essential for particle systems, crowds, vegetation, and any scene with many similar objects.

Level 11: Physics Simulation

What's rendered: A real-time physics simulation using Rapier.js (compiled to WASM). Rigid bodies with sphere, box, and cylinder colliders spawn and interact via gravity, collisions, friction, and restitution. Each Three.js mesh syncs with its physics body every frame. Click to spawn more objects. The physics step time shows simulation cost separate from rendering. Walls contain the chaos.

Level 12: Ray Marching

What's rendered: A fullscreen fragment shader that ray marches through a signed distance field (SDF). No polygons - the scene is defined mathematically: sdSphere, sdBox, sdTorus, sdCapsule. The camera shoots rays per-pixel, stepping through space until hitting a surface. Features include smooth blending (smin), soft shadows, ambient occlusion, and morphing shapes. This technique enables infinite detail, smooth boolean operations, and effects impossible with rasterization.

Level 13: WebGPU

What's rendered: A complex scene testing GPU throughput with a high-poly torus knot, 500 instanced cubes, and 2000 particles. The indicator shows WebGPU availability in your browser. WebGPU is the successor to WebGL - it provides lower-level GPU access, compute shaders, and better performance. Three.js has experimental WebGPU support via WebGPURenderer. This demo detects capability and showcases what next-gen web graphics can achieve.

Conclusion

This benchmark was straightforward and informative for me. Anthropic's Opus 4.5 model is the real deal when using the Three.js library. Although these are simple examples, my intention was to lay the foundation for more complex examples in the future. I think it's really fascinating how far the frontier is for both tools, Claude Code and Three.js.