|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/react-three-portfolio/
课程评论：没有评论
**课程名称：** 使用 React Three Fiber 创建 Three.js 作品集 **课程概述：** 本课程将教授如何使用 Three.js、React、React Three Fiber / Drei、Framer Motion 和 Swiper.js 来创建一个独特、美观且用户体验极佳的 3D 作品集网站。 **核心技术与内容：** * **React Three Fiber & Drei：** 学习如何加载 glTF 模型，包括一个**动画 React.js Logo** 和一个**根据用户在页面位置进行缩放的地球模型**。还将学习如何使用 Drei 轻松访问和**创建自定义的、可动画化的星空背景**。 * **Framer Motion & React Intersection Observer：** 结合使用这两种技术，为网站元素**创建出色的动画进入效果**。 * **Swiper.js：** 学习创建**两种不同类型的美观独特的轮播组件**：一种用于展示作品集项目，另一种用于展示工作经历。 * **Email.js：** 将**联系表单集成电子邮件发送功能**。 * **优化技术（额外视频）：** 学习如何**优化 glTF 模型**以及如何**监控 React Three Fiber 应用程序的性能**。 **总结：** 本课程将引导您全面掌握使用现代 Web 技术构建交互式 3D 作品集网站的流程，从 3D 模型加载、背景特效、动画交互到内容展示和联系功能，并包含实用的性能优化技巧。
In this course we'll learn how to create a unique 3D portfolio website using Three.js, React, React Three Fiber / Drei, Framer Motion, and Swiper.js to build a beautiful and intuitive user experience. We will use React Three Fiber & Drei to loads glTF models into our project, one model is of an animated React.js logo, while the other is a model of the Earth, which will scale according to where the user is on our page. Using React Three Drei gives us easy access to the stars we'll be creating as our background, and I'll show you how to animate them and create our custom component. We'll use Framer Motion together with React Intersectional Observer to create awesome animated entrances for elements on our site. Using Swiper.js will allow us to create some of the most beautiful and unique carousels on the web, and we'll be making two different types of them, one to showcase our portfolio projects and another to showcase our work history. And we'll use Email.js to give our contact form the ability to send us emails! There are two bonus videos as well that cover optimizing techniques we can use in our projects: how to optimize our glTF models and how to monitor the performance of our React Three Fiber applications.
