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

Derek Chang