Three.js Essentials: From Zero to 3D Hero

Explore how three.js, a JavaScript library, enables web 3D experiences, runs above WebGL, and simplifies shaders, matrices, lighting, and interactive examples.

Set up a three.js project by unzipping resources and opening the HTML and 3.9.js. Render a scene with a perspective camera, renderer, and a 2x2x2 cube mesh and material.

Learn to build a basic three.js scene with a full-screen canvas set by css, a scene, a camera, a mesh with geometry and material, a light, and render the scene.

Change the code to transform a cube into a brick by adjusting dimensions to two by one by four and setting the color to coral.

Learn to create a hole in a tile using Three.js by composing several box meshes. Position left, right, top, and bottom plates to form the hole, reusing geometry for efficiency.

Remove the initial cube and create eight small cubes with one-third dimensions, placing them at the cube's vertices, then add them to the scene and rotate the world.

Build eight cubes on two plates, connected by golden beams of three types—horizontal, vertical, and end connections—using three.js geometries, gold material, and nested loops to place beams.

Learn to build a centered square of rotating cubes in Three.js using a grid loop, an offset d, and careful cube spacing.

Build one big spinning cube by instantiating a thousand small cubes, each placed at a random position from -4 to 4, using three.js meshes and box geometry.

Build a randomized city in three.js by spawning up to 20 blocks on a centered grid with random width, height, and depth, creating skyscrapers and a rotating New York–style city.

You modify a rotating cube by building four box geometries (8x10x12, 10x8x10, 10x10x8, 9x9x9) to create cut vertices, add them to the scene, and explore different geometries in Three.js.

Convert a cube to a smooth sphere in three.js by replacing box geometry with sphere geometry, set radius to 1.5 and width and height segments to 32.

Build a beach ball in Three.js by assembling colored sphere segments with sphere geometry and basic materials, adding caps and final tweaks to create a spinning, multi-colored model.

Build a pill capsule by composing a red cylinder body with a half-sphere cap, group them, and rotate the pill itself in the draw frame, not the scene.

Create a mysterious spinning object in three.js by stacking torus geometries and a sphere as meshes in a group. Explore torus geometry parameters to shape a planet-like flying saucer.

Build a parametric wave surface in three.js by mapping u and v to x and y and using cos(2*radius/2) for z, then experiment with parameters to shape centered waves.

Build a heater-like coil in Three.js by creating a custom curve (My Curve) with a getPoint function and generating a tube geometry with adjustable radius, divisions, and closed option.

Color four cubes in three.js using different color methods: name, numeric 0–1, hex, RGB bytes, and RGB percentages, on a peach puff background to explore colors and lights.

Explore creating a rainbow ring in three.js by arranging 40 spheres in a rotating group, coloring with hsl to morph hues across the circle.

Color the six sides of a single cube in three.js using a material array. Create a mesh with six colored faces: red, violet, yellow, orange, green, and blue.

Explore three.js lighting by replacing three moving balls with point lights that illuminate the surface below, color them red, blue, and yellow, and adjust ball size to 0.2.

Enable soft shadows in the renderer, configure a PCF soft shadow map, and make the torus both cast and receive shadows from a spotlight to reveal a beautiful shadow.

Create a red planet by modifying an icosahedron geometry, applying flat shading, adjusting vertex positions and normals, and lighting with red and blue point lights while tuning rotation and camera.

Explore constructive solid geometry (CSG) in three.js by subtracting a small inner cylinder from a larger outer cylinder to create a pipe, using BSP tree operations.

Build a three.js ashtray by shaping a cylindrical body with eight sides, adding a hollow hole and four cigar slots, then subtract gutters with CSG to finish.

Explore building a mug in three.js by combining a hollow cylinder via csg subtraction, adding torus edges and a half a torus handle for a complete mug.

Learn to build a hyperball in Three.js by combining two cones with a CSG union, intersecting with a plane, applying a crimson material, and animating rotation.

Use Three.js to convert a spinning cube into a hollow die with an internal light using constructive geometry and CSG operations.

Learn to build a mysterious carved ring in Three.js by subtracting six box elements from a cylinder using constructive geometry, yielding a spinning final object.

Build a spinning three.js pyramid from a triangle by defining a custom vertices array for base with a right angle, computing vertex normals, and rendering sides, edges, and vertex dots.

Learn to draw a 2D house using turtle graphics with move and line commands, then extrude it into 3D with depth, bevel, and a shiny material in a Three.js scene.

Build a village of randomly placed, variably scaled houses, add fog and lights, group them into a village, and animate a rotating village for varied results.

Explore Three.js geometry by building a field of geo markers from quadratic curves and holes, then create 200 markers with random scale and rotation across a curved plane.

Create a pacifier with rotational geometry by building a sinusoid-inspired profile and using late geometry to generate the final form, then refine with double-sided rendering.

Enhance Three.js performance by merging thousands of building geometries into a single buffer geometry and rotating it, instead of rendering many individual meshes, to create a planet scene.

Learn to animate a ball moving between two random pillars in three.js by computing a motion vector, dividing it into 200 steps, and updating the ball’s position each frame.

Move a bow back and forth between two posts in three.js using a time-based coefficient and linear interpolation. Track elapsed time with a clock to drive smooth, constant motion.

Learn to animate a ball circling a pole in three.js using cosine and sine with a radius of 30, adjusting height for proper orbit.

Animate a ball around a spherical planet in three.js by converting rectangular to spherical coordinates with radius 80, updating the draw frame for a zig-zag path.

Learn how to animate a bow moving around a torus in three.js by computing a parametric radius and coordinates, demonstrating key 3D math for torus motion.

Animate spheres moving on the surface of a cube using randomized speeds and offsets, driven by time-based angular math and trigonometric coordinates.

Move a ball inside a box using a velocity vector, update its position in the draw frame, and bounce off the ends by reversing velocity to simulate 1D motion.

Move a ball on the x and z plane in Three.js using a random direction vector and speed, then bounce off the walls inside a 160 by 100 box.

Explore three-dimensional bouncing by simulating gravity on balls inside an aquarium, with y-boundaries, velocity updates, and boundary inversion to create realistic up-down motion.

Three jumping balls collide with the ground and scale on collision to look more realistic, using a k coefficient from top, y, and radius to drive the scale change.

Implement a half-pipe scene in three.js by constructing a box and cylinder with CSG subtraction, applying realistic physics to three balls, and animating motion with a clock and sinusoidal timing.

Create a Newton's cradle in Three.js by building a scene with a renderer, camera, materials, and lights, and drive it with an animation loop that renders and animates the cradle.

Move the camera around a cube in Three.js on a curved radius-30 path, compute the view angle, and use camera.lookAt to keep the brick centered.

Move the camera in and out around the spinning Shredder by using a cosine-based distance, look at Shredder's position, and synchronize the light with the camera.

Move along the lemniscate of Bernoulli between two fixed points by implementing a time-based lemniscate function, and adjust the camera to look ahead along the path.

Move the camera along a computed trajectory and path(t) through four geo markers backward, looking at t-1, with the field of view adjusted from 30 to 60.

Fix the three.js starter code to make the camera look at the star inside the cube from any orientation, using vector three, world-to-world transforms, and an animated up vector.

Master a camera transition between two paintings in three.js by defining border camera positions, up vectors, and look-at targets, then interpolate with lerp for a seamless sweep.