Learn Three.js: The Absolute Beginner's Guide

Explore how to add ambient, directional, hemisphere, and point lights in a Three.js scene, adjust intensity with a debug UI, and observe how lighting reveals mesh standard materials.

Add shadows to objects in three.js by enabling the shadow map, tuning ambient and directional lights, and setting the sphere to cast shadow while the plane receives it.

Apply textures to a three.js object using a texture loader and map, enable sRGB color space for accurate colors, and address tiny textures with a magnification filter to avoid pixelation.

Demonstrate applying basic, normal, matcap, and standard materials to Three.js objects, load textures, enable lighting, and control metalness and roughness via a debug UI.

Import a 3d model into a three.js scene with gltf loader, orbit controls, and lights. Adjust position, rotation, and scale, and animate with an animation mixer and clip actions.

learn to use environment maps as background and light in three.js with cube textures and hdr images, and fix models to the ground using a ground projected skybox.

learn how to add a debug UI panel to a three.js scene to edit objects on the fly, including moving, toggling visibility, wireframe, and color changes using lil-gui.

Implement responsive resizing and full-screen toggling in a three.js scene by updating camera aspect, renderer size, and pixel ratio for any device.

Learn to animate a three.js object by rotating it on the y axis and using a clock for frame-rate independent motion, then enhance animations with GSAP library.

Learn to add 3D text to a three.js scene by loading a typeface font with a font loader, building text geometry, centering it, and applying a matcap material.