Three.js, React Three Fiber, Drei, React Spring & More

Understand what React is and why to learn it, a JavaScript library for building user interfaces. See how it enables modern, interactive single page applications through reusable components.

Explore the src folder by writing React code in index.js, import Styles.css to apply fonts and colors, and render the app component into the root div using JSX.

Master react rules by returning a single element, using fragments, and employing self-closing tags; learn to use className, htmlFor, and curly-brace expressions like map and variables.

Learn how to apply styles in React using inline styles as a JavaScript object with camelCase properties and by importing CSS files, targeting elements with class names.

Learn how to build and reuse React components to keep code clean, modular, and scalable, including creating a new input component, exporting, and importing it into the app.

Learn to build a counter in React by using the useState hook to track a zero-initialized state, render the current count, destructure count and setCount, and increment on button click.

Persist the counter across reloads using local storage with get item and set item, retrieving on first render via useEffect with an empty array and default to zero when undefined.

Toggle text visibility with a button using useState to conditionally render content; learn to use curly braces, the ternary operator, and logical and for dynamic display in React.

Master how props pass data from the app to card components, render dynamic cards with map and children, and lift state up with useState.

Learn how to prevent unnecessary re-rendering with React.memo by memoizing the title component and preventing the hello component from re-rendering when the toggle changes.

Learn how to use the useRef hook to access a DOM element, attach it to an h1, and update its text after the first render using useEffect.

Explore writing Three.js with React using React Three Fiber, aided by Drei and React Spring, as a React renderer that compiles JSX into a Three.js scene and manages canvas defaults.

Learn to build a first React Three Fiber application by integrating Three.js with React using the canvas component, creating meshes, geometry, and materials in camelCase, and animating with useFrame.

Learn to switch between perspective and orthographic cameras, adjust zoom, and use axis and grid helpers in React three fiber. Build a triangle with buffer geometry and position attributes.

Learn to load textures and models in React Three Fiber using the useLoader hook, with texture, gltf/glb, obj, and fbx loaders, and apply textures to a mesh.

Create particle scenes by converting sphere geometry into particles with the points class. Load a snow texture, build a 2,000-vertex buffer geometry, and animate with delta time.

Learn how to load GLB/GLTF models in React Three Fiber using GLTF loader, GLTF JSX, and Drei helpers. Explore suspense-based lazy loading, preloading, and playing animations.

Learn to debug a React Three Fiber app using a debugging interface to tweak mesh position, color, and wireframe, mirroring Three.js documentation panels.

Explore mouse events in three.js with React Three Fiber, including onClick and pointer events, use the automatic raycaster, and toggle mesh color with a boolean state while stopping propagation.

Explore Drei and its helpers in React Three Fiber, including orbit controls and hooks like the Gltf hook and use animations hook, using version 9.79.

Explore staging in Three.js with ambient and directional lights, shadows, and helpers to visualize lighting; then implement environment maps, sky, and ground to achieve realistic scenes.

Discover the perspective, orthographic, and cube cameras in three.js, render scenes from a chosen camera, and create six textures with a cube camera to build env maps and reflections.

Explore grid and cell attributes in the grid helper, and master camera and gizmo controls, including rotate, track, zoom, and set look at, orbit, presentation, scroll, transform, and pivot controls.

Learn to render 2D and 3D text in a 3D scene with text and text3d helpers, load Montserrat fonts, style with color and size, and add html overlays with occlusion.

Master the positional audio helper from Drei to play a sound at a location, toggle with a mesh click using useState, and adjust URL, autoplay, loop, and distance.

Explore shader materials in Three.js via React Three Fiber: mesh reflector, mesh wobble, and mesh distort. Adjust reflections with resolution, blur, and mirror attributes, and enchant visuals with gradient textures.

Explore the mesh portal material to open a portal into another scene, switch scenes with double clicks, and animate the blend and camera controls from Dre.

Explore how React Spring enables physics-based animations in React apps, with damping and real-world motion, and learn its versatility across divs, images, HTML elements, React Native, and React Three Fiber.

Open the startup folder, install packages, run the server, and interact with a cube mesh that scales on click. Animate the scale and color using react-spring, useState, and animated components.

Learn how React Spring's imperative API updates animations without rerendering, using useSpring and its API to move a mesh from 0 to 1 on click, contrasting with useState.

Explore the props of react spring's useSpring, including from and to, loop, delay, reverse, pose, duration, reset, config, and events such as onstart, onpause, onresume, and onrest.

Learn to animate a cube with the useSpring and useSpringRef imperative APIs, moving from minus two to positive two, triggered by click, with hover pause and resume.

Learn to animate multiple meshes using the useSprings hook, creating an array of items and mapping to three.js meshes with react-three-fiber; drive positions with spring values from and to.

Use the useTrail hook to create a staggered trail for three meshes, scaling from 0 to 0.6 and aligning them on the x axis by index, with click-driven animation.

Learn to apply physics with react three rapier by wrapping meshes in a physics world, using rigidbody components, adjusting gravity, and managing single or multiple rigid bodies.

Explore how to implement and customize colliders in a React Three Fiber physics scene, switching between cuboid, ball, hull, and tri mesh colliders, and aligning them with meshes.

Master rigid body methods by applying forces, impulses, and torques at points, handling collisions and sleep-wake cycles, and tuning gravity, restitution, and friction for realistic three-dimensional interactions.

Discover how Rapier calculates object masses from collider size and how mass affects impulses and collisions. Use multiple colliders and the mass attribute to adjust each cube's weight.

Explore rigid body types: dynamic, fixed, and kinematic; animate a spinner with time-based translation and quaternion rotation; control a cube with keyboard impulses and single-jump logic using react-three-fiber and dre.

Explore instanced mesh to render many objects from one geometry and material with individual transforms, boosting performance via a single draw call and per-object position, rotation, and scale.

Use a sensor on a collider to detect when a sphere enters or leaves a cuboid, handling intersection enter/exit events to toggle 3D text with useState.

Master post-processing with react-three-fiber using the effect composer to merge passes and improve performance, while exploring effects like pixelation, vignette, and godrays.