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.

Build a 3D scene with react-three-fiber using the Canvas, define a mesh with geometry and material, and animate rotation with useFrame and refs for better performance.

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.

Discover basic geometry in three.js by building points, lines, and faces with vector3 vertices and mesh materials, including double-sided rendering.

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.

Master how three.js materials control color, fog, transparency, emissive lighting, metalness, roughness, and reflections, from base to standard and physical materials, including wireframe and double-sided rendering.

Load textures with useLoader in react-three-fiber and apply them to materials, textures on geometry, and background. Use Suspense for async loading and note UV mapping considerations.

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 load glTF 3D models into a React Three Fiber scene by downloading from sketchfab, placing in public, and using useLoader to add, scale, and position Tesla models.

Demonstrate debugging physics with a bounding box in a React Three.js workflow, using gravity, transform group, and dragonball wrappers to move models as a single object.

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.

Add god rays via react post-processing by wiring a sun mesh and scene lights, using a dedicated effects component and optimal settings for performance.

Learn to load a GLTF model with animations and play its animation clips in a react-three-fiber scene using three.js mixer, clip actions, and a render loop with delta time.

Deploy a completed three.js project built with React to GitHub Pages by configuring public asset URLs, building a production dist, and using a gh-pages deploy script with a homepage.