React Three Fiber(R3F) - Interactive 3D web development

Create an r3f canvas to render a rotating red 3D box with mesh and lighting, and learn converting degrees to radians using three.js degToRad within react three fiber.

Explore the core 3D concepts of scene, camera, and renderer in 3js, and learn how moving the camera versus objects shapes the rendered view.

learn how to render a 3d scene with react three fiber, using useThree and useFrame to manage the renderer, scene, camera, and per-frame updates, including automatic resize handling.

Compare perspective and orthographic cameras in a 3d scene, tuning near, far, and fov to control rendering. Learn when orthographic projection suits 2d sizing, and how zoom shapes the view.

Explore orbit controls, axes helper, and grid helper in a React Three Fiber scene, install orbit controls via npm and interactively navigate a 3D world.

Install Leva and import useControls to expose live GUI controls for changing the canvas background color, grid segment, and mesh rotation in Three.js.

Learn to transform a 3D object by adjusting position, scale, and rotation on a mesh, with live updates via useFrame and useRef, and degree to radian conversion in three.js.

Explore object3D as the base that provides position, scale, and rotation for mesh, scene, and group through inheritance, while geometry and material do not inherit.

Explore how world coordinate systems define positions, scales, and rotations for scenes, groups, and meshes in 3js, and use per-frame rotation and axis helpers to visualize coordinate relationships.

Explore geometry and modeling in React Three Fiber, focusing on meshes, groups, and scenes and their transforms. Learn that geometry consists of triangles and how segmentation affects performance.

Explore three ways to add mesh in r3f, wrapping geometry and material, using geometry as a child or as a property, and importing predefined shapes via drei.

Explore rendering a wireframe for a box geometry, sharing one geometry between two meshes, and adjusting box geometry options with the Leva GUI to match the 3JS style.

Master circle geometry in react three fiber by adjusting radius, segments, theta start, and theta length to shape circles, arcs, and half circles.

Learn to work with wireframe, basic, and lambert materials in React Three Fiber, adjusting color, transparency, opacity, side rendering, depth test and depth write, fog, and emissive lighting effects.

Compare Phong and Lambert materials in r3f, showing Phong's reflective light with specular, shininess, and flat shading, and use normal material to map normals to rgb for visualization.

Explore ambient, hemisphere, directional, point, and spot lights in React Three Fiber, and learn to apply environment maps and lighting to materials to craft varied atmospheres.

Download a 4k hdr image from Poly Haven and apply it as the environment map using drei to illuminate the scene and serve as a background.

Explore creating shadows with directional, point, and spot lights using castShadow and receiveShadow on meshes and floor, and adjust shadow camera scope and map size for quality.

Explore r3f interaction event types by building an interaction test with a box, lighting, and helpers, and learn how clicks and hover alter color and scale of the mesh.

Explore how raycasting in Three.js via React Three Fiber determines which 3D objects receive a click by tracing a ray from the screen, and how stopPropagation controls event delivery.

Set up the development environment for a React Three Fiber 3D e-commerce site, install npm, node, and Veed, and build a canvas showroom with lighting and orbit controls.

Learn to set up path aliasing in a vite and tsconfig project, configuring baseUrl and paths to map src and components for showroom and three js components.

Load 3D models by understanding object3D such as scene, group, and mesh, and when needed, bring in custom geometry or textures via Blender using FBX or OBJ files.

Modify a downloaded shoe model in Blender, export it as glTF/GLB, and load it in R3F using the glTF loader, preserving textures.

Explore selecting individual shoe parts from a GLTF model using raycaster, clone the clicked mesh material, and apply color changes only to the targeted part.

Review camera control and organize 3d assets by using a glb file with embedded textures, clarify texture handling for gltf vs obj/fbx, and remove unused files.

Enable dolly to cursor to zoom toward the cursor in 3d cameras, and compare with 2d orthographic zoom, while setting min and max distance and testing infinity dolly for ux.

Explore r3f camera controls to move the camera smoothly with fit to box, setLookAt, and padding, and experience first-person and third-person views, transitions, and path animations.

Create an automatic turntable camera in React Three Fiber by spinning around a product using sine and cosine, with keyboard controls and camera look-at adjustments.

Learn to receive and use camera controls events in React Three Fiber to manage fitting and spinning. Use useState, useEffect, and addEventListener to handle sleep, wake, and control events.