Learn Three.js using React: Build a 3D Tesla Workshop 2021

Build a plain three.js scene with a perspective camera, WebGL renderer, and a mesh cube, then animate with requestAnimationFrame and handle resize to maintain aspect ratio.

visualize the 3d scene with an axes helper and the right-hand rule, then implement orbit controls to rotate and zoom around the origin in react three fiber.

Explore lighting in three.js using react, converting a box and floor with physical material and a glowing bulb to cast and receive shadows while balancing performance.

Learn to create an interactive 3D scene in React with Three.js by handling click, pointer enter, and pointer leave events to select meshes, scale on hover, and apply colors.

Learn to implement a camera panning user interface in Three.js with React, wiring on-screen buttons to update camera position and target between two cars.

Learn to implement a color picker that changes the color of the vehicle you're viewing, using object names to locate the paint mesh and update the active mesh in state.

Traverse the model to apply cast and receive shadow to all meshes, set materials to front side, and adjust shadow map size and radius with a directional light.

Set up post-processing in a three.js scene using an effect composer, add render passes and effects, and leverage the react post-processing library for easier integration.

Import an effect composer and apply depth of field and bloom, adjust focus distance and focal length, and preview blur to fine-tune a 3d scene.