Three JS with React JS course

learn to build a first three.js scene in react using react-three-fiber, creating boxes with mesh, geometry, and material, and illuminate the scene with ambient and spotlight lighting.

Explore styling in Three.js with React Three Fiber by animating a box, applying materials and colors, and using spotlight and point light to enhance the scene’s lighting.

Learn to add animations in Three.js with React by resizing the canvas for responsive heights using media queries and a custom hook.

In this module, build a landing page using bootstrap and react-three-fiber to showcase a 3D product, with shadows, point lighting, basic animation, and an imported external object.

Bootstrapping the watch landing page, set up a responsive layout and navigation. Configure the canvas with React to render a Three.js watch scene and load the 3D object from public.

Import a 3d object into a React Three Fiber scene, place ambient and spotlight lighting, enable shadows, and configure camera, rotation, and scale with presentation controls.

Complete the hero section by styling and increasing height to 500 pixels. Center content with flex and Bootstrap, and create a two-column layout with a canvas for geometry and lighting.

Add 3d animations in a react three fiber project with use frame and elapsed time to drive x, y, z rotations. Highlight the landing page with a styled price tag.

Learn to create a skybox background and implement orbit controls in a React Fiber project, laying groundwork for the end-of-module project.

Explore skyboxes as textured six-faced cubes that create a 3d environment, and learn to implement skyboxes and orbital controls in Three.js with React Three Fiber.

Explore an interactive Three.js with React project, dragging a pebble to act as a light source, and animate colors and movements with useFrame, React Spring, perspective camera, and ambient lighting.

Launch a 3d nft landing page project using react-spring three and three.js, set up a canvas with orbit controls, and animate with spring-based color transitions.

Create a 3d scene with a perspective camera, ambient and point lights, and an animated sphere using react-three-fiber and spring-driven wobble, with hover interactions and a skybox environment.

Complete the nft project by building and animating a 3d sphere NFT with Three.js in a React app, using ambient and point lights, animated materials, and an overlay.

Discover how to start a three.js project with the editor, import models from Sketchfab, set up lights and shadows, add orbit and presentation controls, and build a 3D portfolio.