three JS Fundamentals Course - Learn Three.js from scratch

Learn how three.js, an open-source JavaScript library, harnesses WebGL to render 2D and 3D graphics in the browser, enabling GPU-accelerated animations and games without plugins.

Explore the fundamental concepts of three.js by mastering 2d and 3d coordinates, x, y and z axes, and how object positions and movements along these axes create basic game-like scenes.

Master the essentials of a Three.js scene by creating a scene, configuring a perspective camera with field of view and aspect ratio, and rendering with a web renderer.

Learn to create your first three.js scene by setting up a basic HTML/JS project in VS Code, and building a scene with a perspective camera and renderer.

Create a box geometry with three.js, apply a mesh basic material with color, and add the mesh to the scene; then position the camera and look at the origin.

Explore creating geometry objects in three.js by building a plane and a box, customizing geometry, materials, and positions to place the box above the plane and rotate for alignment.

Explore how a three.js scene is structured, how scene visibility affects rendering, and why requestAnimationFrame is needed to update the display.

Explain how to implement an update loop using the request animation frame function with a renderer, scene, and camera, creating a recursive call that updates state and improves performance.

Learn to create a parent–child relation in three.js by attaching a box to a plane, rotating the parent to rotate the child, and naming objects for access.

Apply the fog object in three.js by setting its color and density to create atmospheric depth in a scene. Enhance the background and lighting later for a more polished look.

Learn how lighting in three.js works by using mesh standard material instead of basic material that ignores lighting, add fog, and adjust the background for future light types.

Create a get point light function in three.js to set intensity and color, then add it to the scene. Adjust its y position and visualize the light with a sphere.

Learn how dat.gui, a tiny JavaScript library, creates a UI to control scene variables like light intensity and position, initializing the GUI to bind a 0–10 range to intensity.

Learn to add orbit controls to a Three.js scene by importing the orbit controls script from the examples, wiring a controls variable, and integrating it with the update function.

Learn to enable shadows in three.js by configuring the renderer, making meshes cast shadows, and planes receive shadows for real-time shadow effects.

Add a grid of boxes to the scene by generating multiple boxes with a configurable amount, use a group to organize them, and explore light types and shadows.

Learn to set up a spotlight in three.js, adjust penumbra and intensity, and position the light to achieve controlled shadows while balancing shadow map size and performance.

Explore how directional light creates sun-like, parallel shadows and tune shadow parameters, light direction, and field of view to fix lighting in three.js scenes.

Explore ambient light as a subtle, sparing illumination, and contrast it with rectangular area lights, two-dimensional sources that yield more realistic shadows than point lights.

Explore how to animate a 3D scene using the built-in random() function in three.js, applying randomized scaling and positioning to a grid of boxes for a staggered, disco-like effect.

Animate with sine and cosine in JavaScript using a clock to compute elapsed time for smooth motion. Vary each child with a unique index and introduce color changes.

Learn how to add noise to a three.js scene by importing a third-party JavaScript noise library and wiring a simplex noise function with two parameters for smooth, randomized animations.

Explore the two main camera types in Three.js: perspective and orthographic. Learn that perspective simulates real-world depth, while orthographic offers isometric views; the tutorial opts to keep the perspective camera.

Build a simple animation rig in Three.js using a group and helper objects to control camera position and rotation, noting that complex animations may require dedicated 3D rigging tools.

Create and name an animation rig in three.js, access the camera named camera that position, and move it for a cinematic view while animating along x, y, and z axes.

Learn how the mesh basic material renders colors independent of lighting, enabling a soft illuminated look and even simulating a light source for objects like spheres and planes.

Explore mesh lambert and mesh phong materials, adjust shininess to control highlights and gloss, compare shading models, and tune lighting and shadows for realistic rendering.

Explore the mesh standard material, a physically based rendering option that yields more realistic lighting than earlier materials, used by Unreal and Unity, with roughness driving shininess.

Discover how texture maps in three js map 2d images onto materials to add surface detail, color variation, bump maps, and properties like reflectiveness, shininess, and roughness.

Explore roughness maps as texture references that control sharpness and reflections via brightness, applying checkerboard textures as roughness and color maps on planes, and tune materials for a concrete look.

Discover how to create environment maps with cube maps in three.js, load textures for X, Y, Z, apply reflections to materials, and set the scene background.

Learn three.js primitive geometries such as box, sphere, circle, cylinder, and octahedron with parameters and materials. Explore modeling basics using vertices, edges, and faces, and importing external 3D models.

Learn to manipulate plane geometry vertices in three.js to reshape existing primitives by adjusting vertex positions, using a clock-based animation loop for updates.

Learn to import external geometries into Three.js scenes, using royalty-free models from online repositories, and load OBJ files to build more complex 3D visuals.

Build a three.js particle system by creating a geometry, populating vertices with points, and rendering a star field. Tune particle count, color, texture, and blending for a galaxy look.

Animate a particle system in Three.js by naming the system, updating its positions on x, y, z axes, and applying rotation in the animation loop.

Explore Three.js post-processing by using shader materials to enhance 3D objects with visual effects and learn how shaders influence pixel rendering.