Companies Home Search Profile

Beautiful React Three.js Fiber Configurator - Design & Code

Focused View

Anderson Mancini

2:35:42

180 View
  • 1 - What we will be creating.mp4
    00:47
  • 1 - link for the final project.zip
  • 2-Project-Files.zip
  • 3 - How to plan your designs for threejs R3F experiences.mp4
    11:42
  • 3 - react-three-fiber-course-configurator.zip
  • 4 - Optimizing the model.mp4
    15:14
  • 5 - Baking the lightmaps on Blender.mp4
    05:46
  • 6 - Exporting the model to use in React Three Fiber Configurator.mp4
    07:18
  • 7 - Environment setup using CodeSandBox.mp4
    05:09
  • 7 - code sandbox starter project.zip
  • 8 - Creating the basic React Three Fiber Scene.mp4
    13:07
  • 8 - code sandbox with the source code of this class.zip
  • 9 - Load the blender Model.mp4
    12:04
  • 9 - code sandbox with the source code of this class.zip
  • 10 - Make the model follows the mouse position.mp4
    10:48
  • 10 - code sandbox with the source code of this class.zip
  • 11 - Create the Intro overlay.mp4
    14:33
  • 11 - code sandbox with the source code of this class.zip
  • 12 - Create the Customizer overlay.mp4
    10:15
  • 12 - code sandbox with the source code of this class.zip
  • 13 - Implementing Valtio for state management.mp4
    09:18
  • 13 - code sandbox with the source code of this class.zip
  • 14 - Implementing the colors configurator.mp4
    09:15
  • 14 - code sandbox with the source code of this class.zip
  • 15 - Implementing the decals selector.mp4
    08:10
  • 15 - code sandbox with the source code of this class.zip
  • 16 - Download button and Mobile adjustments.mp4
    06:02
  • 16 - code sandbox with the source code of this class.zip
  • 17 - Animate the interface with framer motion.mp4
    14:39
  • 17 - code sandbox with the source code of this class.zip
  • 18 - Conclusion.mp4
    01:35
  • Description


    Learn to create a 3D configurator using Three.js, React Three Fiber, Valtio and Framer Motion.

    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

    Who is this for?


  • 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
  • More details


    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.

    Who this course is for:

    • 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

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Anderson Mancini
    Anderson Mancini
    Instructor's Courses
    Entrepreneur and developer with over 15 years of experience in technology, communication, and interactivity. Founding partner of Neotix Transformação Digital, which since 2005 has created and produced more than 400 digital marketing projects for clients from different segments. In addition to being a speaker, he is also a teacher and creative developer focused on creating interactive experiences using Three.js, WebGL, and WEBGi.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 17
    • duration 2:35:42
    • Release Date 2023/04/25