Three.js - The Complete Beginner to Advanced Course

Explore how three.js serves as a cross-browser JavaScript library and API that renders interactive 2D and 3D graphics in web pages using WebGL with GPU acceleration via the canvas.

Learn how to use Three.js by creating a JavaScript file, importing the library in multiple ways, writing code, linking to HTML, and running a server to view the result.

Learn the core Three.js concepts by exploring scene, camera, mesh, and renderer, and how to place 3D objects in world space on a canvas before moving to practical coding.

Learn to implement three.js in an HTML file by creating a project folder, downloading the three.js module, and writing a basic three.js script in a new file.

Build a three.js page with a container div, import three.js, and create a scene with a perspective camera and a rotating red cube using box geometry and mesh basic material.

Create a capsule and a cube in three.js using capsule geometry with radius and length, position them apart, and animate their rotation on the x and y axes.

Explore adding basic geometric figures in Three.js by creating a cone geometry with radius, height, and radial segments, applying a basic material, positioning, and rotating on the z-axis using requestAnimationFrame.

Create a plane in three.js by pairing plane geometry and a basic material to form a ground mesh, and adjust width, height, rotation, and camera position for your scene.

Place four geometric figures along the plane edges, building on the center cube and the right-side cube to explore combining different materials and growing meshes.

Group meshes and materials in three.js by creating a new Group and adding them to the scene to rotate as one.

Learn to build a three.js house using a floor, four walls, a gate, a window, and a roof, with group rotation and axis adjustments.

Create a functional house in Three.js by positioning and rotating meshes, building floor, walls, and roof, and experimenting with colors and materials to shape structures.

Explore how Three.js materials shape mesh appearance by pairing plane geometry and colored meshes with basic and standard materials, and learn how lighting reveals the colors in a scene.

See how light shapes three.js scenes and why standard materials require a light source, unlike basic materials. Learn about hemisphere and directional lights and shadows in practice.

Explore adding and tuning light in a three.js scene with hemisphere light, and see how basic and standard materials respond to lighting, including sky color, ground color, and intensity.