本课程将探索使用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英文发音无字幕含代码
你将会学到的
- 如何为配置器创建设计概念
- 优化 Blender 中的模型以用于实验
- 使用 React、React Three Fiber 和 Valtio 实现配置器
- 使用 Framer Motion 创建超级简单的 UI 动画
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
