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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.