Beautiful React Three.Js Fiber Configurator - Design & Code

Free Download What you'll learn
How to create a design concept for a configurator
Optimize the model in Blender to use in the experiment
Implement the configurator using React, React Three Fiber and Valtio
Create super easy UI animations with Framer Motion
Requirements
Prior knowledge of React is required and also in using online code tools like Code Sandbox. This is not a basic React Three Fiber course, so it is important that you are already familiar with the library before enrolling. Knowledge of building tools is also recommended.
Description
This course will explore creating a beautiful configurator using Three.js and React Three Fiber. We will see how I make my designs for applications, I will understand how to optimize the model in Blender and export it to use in the experiment. Next, let's dive into react three fiber and implement the entire project, from a simple scene to load the model, creating the color variations, covering state management concepts, and using Framer Motion to animate the interface.This is a dynamic course and very focused on the final product. You can find the link to the final project in the introductory class or on my Twitter profile.Each class has a link to resources that contain the source code for the specific lesson. That way, you can use the video as a guide through each lesson and see the codes provided to build your project. Or you can follow the instructions in the video and code along with me as you go. You choose the best way and format that you like to learn the most.This course is suitable for people familiar with the React Environment, who already know a bit about React Three Fiber, and who have prior knowledge of using online code tools like CodeSandBox.
Overview
Section 1: Introduction
Lecture 1 What we will be creating?
Lecture 2 How does this course works?
Section 2: Design
Lecture 3 How to plan your designs for three.js / R3F experiences
Section 3: 3D Optimization
Lecture 4 Optimizing the model
Lecture 5 Baking the lightmaps on Blender
Lecture 6 Exporting the model to use in React Three Fiber Configurator
Section 4: React Three Fiber Development
Lecture 7 Environment setup using CodeSandBox
Lecture 8 Creating the basic React Three Fiber Scene
Lecture 9 Load the blender Model
Lecture 10 Make the model follows the mouse position
Lecture 11 Create the Intro overlay
Lecture 12 Create the Customizer overlay
Lecture 13 Implementing Valtio for state management
Lecture 14 Implementing the colors configurator
Lecture 15 Implementing the decals selector
Lecture 16 Download button and Mobile adjustments
Lecture 17 Animate the interface with framer motion
Lecture 18 Conclusion
For those who already know Threejs or React Three Fiber and want to learn how to create and manipulate the interface of their applications using React Three Fiber together with Valtio and Framer Motion


Homepage