Three.js From Basic to Advanced: Combining Technology & Art

Set up your development environment for three.js by installing node via nvm with 18+ LTS, create a three.js project, and install the three package with npm (around 0.15).

Explore how changing the model position before render reveals positive loops, and implement a true loop with requestAnimationFrame alongside orbit controls for smoother, interactive Three.js scenes.

Explore how Three.js geometry types such as box, cylinder, cone, ring, plane, and edge geometry are created and manipulated by code, focusing on dynamic generation, performance, and practical visual effects.

Learn to enable shadow maps and configure light shadows in three.js. Tune shadow map size, bias, and near/far clipping to achieve realistic depth and ground shadows.

Explore pbr materials and textures to render realistic metals, plastics, and leathers, using metalness, roughness, and normal maps, and learn how lighting and hdr environments affect reflections.

Learn to use transparent textures to reduce polygon counts for mobile web, applying transparency maps, depth testing, and double-sided rendering in three.js workflows.

Apply a transparency map to flower pots, export PNG with alpha, then configure materials and alpha blending in Blender and preview the result in a Three.js scene with lighting.

Create a low-poly car in Blender by planning with multi-angle references, building with cube primitives, extruding and subdividing edges, adding details with mirror and boolean operations.

Move, rotate, and scale the car while refining its structure, grouping, and display settings; adjust pillars, extrude and bridge parts, merge materials, and prepare for rendering.

Explore moving, rotating, and scaling in three.js, learn parent-child relationships and scene hierarchy, and build orbiting dynamic effects like sun–earth–moon with shared materials.

Explore dynamic web animations using gsap and twin js to drive 2d and 3d effects. Learn to control motion with from/to, duration, repeat, yoyo, easing, and onComplete/onUpdate callbacks.

Learn to create a complex Blender animation baked into keyframes via physics, then import and play it in Three.js using gltf animations, rigid bodies, and a mixer.

Explore ray picking with Three.js using Raycaster to select 3D objects. Learn mapping mouse coordinates to normalized device coordinates and retrieving intersected objects, including occlusion.

Improve ray picking with a four-step recaster workflow that converts screen to WebGL coordinates and selects firework tubes to trigger animations. Export launcher as its own glb for precise control.

Master ray picking for interacting with grouped 3d objects, rotate the firework tube to create variation, and use subobject user data to treat complex models as unified virtual objects.

Explore ray picking in three.js to select and recolor objects like golden eggs, addressing shared materials and uv mapping, and learn code-side material cloning for independent changes.

Enhance a scene with hdr lighting and pbr materials by loading an hdr environment with rgb loader, mapping a 360-degree panorama, and tuning ambient lighting, background, reflections, metallicity, and roughness.

Master skeletal rigging and skinning to enable bone-driven movement and vertex deformation. Create idle and walking animations on a shared timeline for three.js, using pose mode and keyframes.

Explore automatic binding in Mixamo to rig a character, export as FBX, then import into Blender for idle and walking animations and action cleanup.

Load a gltf astronaut model, cut idle, walk, and run animations with subclips, play them with the animation mixer, and implement a camera that follows the character.

Switch character actions in Three.js using global state, trigger idle, walking, and running with the W key after two seconds, and apply cross-fade transitions with delta-time timing.

Learn to build a robust third-person camera in three.js that faces the character, follows a virtual target, and uses world-space rotations, cross products, and orbit controls for precise, tilt-free movement.

optimize the three.js third-person camera by hiding the virtual viewpoint and moving the view only when the mouse is pressed, with delta-time easing for rotation and wheel zoom.

Learn to implement a robust scene collision system in Three.js using ray detection. Use forward, upward, and downward rays and a raycaster to handle walls, stairs, and uneven surfaces.

Source car models from Sketchfab, choose free options, and adjust textures, roughness, and metallic properties. Import, fit to a one-meter grid, separate tire materials, use HDR/PBR textures, then export.

Add interactive car doors that open on click and fly the camera from the character into the car, using ray picking, object separation, and precise origin points.

Realize a camera flying-in inside a car in three.js by building path points, employing a Catmull-Rom curve, applying easing to the door, and aiming at a target.

Explore in-car perspective transitions, automatic door closing, and mouse-controlled camera within a 360 panorama display using a double-sided sphere and panoramic textures.

explore adding an interactive six-color UI to change a car body's color in three.js, with rgb-based tweened transitions and a color palette hotspot controlling the material color.

Clone a dancing character with a bone skeleton in Three.js to create multiple dancers on stage, loading one gltf model and duplicating it to reduce load time.

Display a character name above the head using the CSS2D renderer, mapping a two metres offset to screen space, and compare CSS2D with the CSS3D renderer for labels and panels.

Design a small interactive game scene with moving trees and energy balls collected for gifts and achievements. Explore scene analysis, texture creation, UV mapping, and memory optimization techniques.

Learn to create and animate a tree in Three.js, generate multiple instances, control positions with virtual objects, and optimize movement, lighting, and shadows via cloning, easing, and dynamic parameters.

Discover how to generate and collect energy balls in a three.js scene, implement collision detection with Box3 bounding boxes, and optimize rendering through culling and dynamic object management.

Learn to implement a game camera that follows a character with offset and look at, enables left-right movement and running animation, and speeds up via time scale.

Learn to build a three-dimensional field in three.js, using two synchronized particle groups moving from spawn to end to create depth and snow-like motion.

Apply dynamic UV animation to a road surface in Three.js, using UV tiling, offset-driven motion, and GSAP to create moving road lines while optimizing with mipmaps and anisotropic filtering.

Discover how to implement safe entry and exit in a Three.js game by destroying resources—models, textures, geometries, and materials—using arrays, and compare destroying versus hiding to prevent memory leaks.

Develop a complete 2D game UI with a centered game-over screen, a descending progress bar, a bottom-right exit, and a scaling completion panel using GSAP animations.

Enhance image quality in three.js by baking lighting into textures using PBR resources, UV mapping, and texture atlases, while optimizing materials and render settings.

Master post-processing in three.js, applying bloom, aoe depth effects, and render passes to produce brighter, three-dimensional visuals and richer overlays.

Apply video textures in a three-dimensional scene to display car screens and other surfaces, manage UVs and upside-down flipping, enable autoplay and looping, and optimize with shared materials.

Combine artistic and procedural methods to boost image quality in three.js, including baking indirect lighting onto textures and PBR materials with metallicity, roughness, and normals.

Learn practical performance optimization for web 3d using art-first and code strategies: bake normals, share materials, reduce textures, merge models, and use scene packaging to keep the frame rate smooth.

Combine programming and art to bring life to a plant in a 3d scene by using skeletal rigging, keyframe animation, and animation mixers, with shader concepts and practical Blender workflows.

Explore how to create a growth animation by combining art and programming, using random scattering and snap back assembly of a car model to achieve dynamic exploded views.

Develop independent development skills, design and implement your own projects, and participate in the company's web 3d projects with the art team, communicating effectively and mastering the project development process.