Filter/Tag
14 entries
Turn the series into something useful: a furniture room planner. Build furniture from primitives, click-to-place, drag-to-move, recolor materials, repaint the room, and swing day to night — the pattern behind product configurators.
Stop building everything from primitives. Model in Blender, export glTF/GLB, and load it with GLTFLoader. Export settings, scene-graph mapping, scale, units, PBR materials, and the pitfalls that bite — with a live model loader.
Start Three.js the right way: what WebGL really is, the three pillars (Scene, Camera, Renderer), the render loop, and your first lit, orbiting mesh — with a live scene you can drag, zoom, and inspect.
The shape-and-surface toolkit: built-in geometries, the five core material types (Basic, Lambert, Phong, Standard, Physical) and when each earns its place — with a live gallery to mix geometry, material, metalness, and roughness.
Position, rotation, scale and the parent-child scene graph where children inherit transforms — plus Perspective vs Orthographic cameras and OrbitControls, with a live sun-earth-moon rig you can drive.
Dress your surfaces: UV mapping, the PBR map set (albedo, normal, roughness, metalness, AO), color management done right, and environment maps that make metal reflect — with a live material you can build one map at a time.
Make a scene look 3D: the five light types (directional, point, spot, ambient, hemisphere), when to use each, real-time shadow maps, and the performance cost seniors watch — with a live light rig you can drive.
Bring in real assets and make them move: loading glTF with Draco, the AnimationMixer / AnimationClip / AnimationAction trio, crossfading between clips, and frame-rate-independent playback — with a live mixer you can drive.
Add cinematic polish: how the EffectComposer renders your scene to a texture and runs full-screen passes (bloom, vignette, custom shaders), why pass order and OutputPass matter, and the performance budget — with a live bloom rig.
Think like a profiler: why draw calls are the real budget, InstancedMesh for thousands of objects, geometry merging, frustum culling and LOD, disposing GPU memory, and reading renderer.info — with a live instanced-vs-separate benchmark.
Turn a scene into a UI: how a Raycaster picks objects under the cursor, normalized device coordinates, hover and click handling, performance tips for picking, and dragging objects — with a live hover-and-select demo.
Tie it all together into a shippable mini-project: loading screens, ResizeObserver responsiveness, a render-loop architecture that scales, framework integration, debug tooling, and a real deployment checklist — with a full capstone demo.
Drop below the built-in materials: the GPU pipeline, vertex vs fragment shaders, attributes/uniforms/varyings, writing a ShaderMaterial, animating it from JS, and extending built-ins with onBeforeCompile — with a live shader playground.
Make things move on their own: the render-world / physics-world split, rigid bodies and colliders, the fixed-timestep loop, syncing meshes to bodies, friction and restitution, and when to reach for Rapier — with a live physics sandbox.