React Three Fiber自助在线设计3D产品配置器应用开发视频教程

本课程将探索使用Three.js和React Three Fiber创建漂亮的配置器。我们将看到我如何为应用程序进行设计，我将了解如何在 Blender 中优化模型并将其导出以用于实验。接下来，让我们深入研究 React 3 Fiber 并实现整个项目，从一个简单的场景加载模型，创建颜色变化，涵盖状态管理概念，以及使用 Framer Motion 为界面设置动画。

这是一门充满活力的课程，非常注重最终产品。您可以在入门课程或我的 Twitter 个人资料中找到指向最终项目的链接。

每个班级都有指向包含特定课程源代码的资源的链接。这样，您就可以使用视频作为每节课的指南，并查看提供的代码来构建您的项目。或者，您可以按照视频中的说明进行操作，并与我一起编写代码。您可以选择最喜欢学习的最佳方式和格式。

本课程适合熟悉 React 环境，对React Three Fiber有一定了解，并且有使用CodeSandBox 等在线代码工具的先验者。

Published 3/2023
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz
Language: English | Size: 2.74 GB | Duration: 2h 36m

英文发音无字幕含代码

你将会学到的

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