|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/master-3d-scrollable-pages-with-threejs-react-three-fiber/
课程评论：没有评论
Coursera 课程总结：使用 Three.js 和 React Three Fiber 掌握 3D 可滚动页面 本课程将引导您在一个小时内从零开始构建一个沉浸式、可滚动的 3D 着陆页。如果您熟悉 React 环境、React Three Fiber，并能熟练使用 CodeSandBox，即可轻松上手。 课程主要内容包括： * **构思与设计：** 学习如何通过视频参考寻找灵感，打磨创意，并为您的 3D 项目塑造独特愿景。 * **React Three Fiber 创意编码：** 从提供的基础模板出发，利用 React Three Fiber 将其转化为精美的设计。 * **3D 模型处理：** 掌握获取免费高质量 3D 模型以及无缝导入页面的技巧。 * **粒子系统设置：** 学习创建可定制的粒子系统组件，并可在其他项目中重复使用。 * **后期处理效果：** 利用 React Three Fiber 的后期处理功能，添加 Bloom、景深、色彩校正等效果，赋予项目生命力。 * **3D 文本创建：** 学会放置 3D 文本在模型背后，实现独特的景深效果，并调整文本参数以增强玻璃质感。 * **性能优化与附加效果：** 学习最大化性能的实用技巧，并添加额外后期处理效果。 * **HTML 和 CSS 布局：** 使用纯 CSS 构建 HTML 页面结构，实现流畅滚动，无需任何框架。 * **集成 GSAP 实现动画：** 学习集成 GSAP，设置可复用的动画组件，轻松为项目添加动态效果。 * **GSAP ScrollTrigger 同步 2D/3D 动画：** 掌握如何利用 GSAP 的 ScrollTrigger，无缝同步 2D 和 3D 动画，创造流畅、沉浸式的滚动交互。 完成课程后，您将拥有一个功能齐全的 3D 着陆页，可供展示技能、激发灵感。您还将获得完整的源代码，方便日后独立创作。课程提供问答支持，帮助您解决项目开发中的疑问。
Welcome to my course on building an immersive, scrollable 3D landing page! In less than one hour, I'll take you through my entire creative process, from ideation and design to coding and final touches, helping you bring a dynamic 3D project to life. If you're familiar with the React environment, have some experience with React Three Fiber, and are comfortable using tools like CodeSandBox, you're all set to join!Here's what you'll dive into:Ideation and Design: I'll share my approach to finding inspiration through video references, refining ideas, and crafting a unique vision for your 3D project.Creative Coding with React Three Fiber: We'll work from a simple boilerplate that I'll provide, transforming it into a polished design using React Three Fiber.3D Models: Learn my best tips for sourcing free, quality 3D models and how to import them seamlessly into your page.Particle System Setup: I'll show you a custom particle system component, fully customizable to fit your style, which you can reuse in future projects.Post-Processing Effects: We'll bring the project to life with React Three Fiber's post-processing effects-adding Bloom, Depth of Field, color corrections, and more.3D Text Creation: Learn to place 3D text behind your model for a unique depth effect. We'll adjust the text parameters to enhance the glass-like effect.Performance Optimization and Additional Effects: Discover my go-to tips for maximizing performance, plus some extra post-processing effects to make everything run smoothly.HTML and CSS Sections: I'll guide you through creating your HTML page sections with pure CSS for seamless scrolling, without any frameworks.Adding GSAP for Animations: We'll integrate GSAP and set up reusable animation components, bringing motion to your project with a few simple steps.2D and 3D Animation Sync with GSAP ScrollTrigger: You'll learn how to synchronize 2D and 3D animations effortlessly, using GSAP's powerful ScrollTrigger to create smooth, immersive scrolling interactions.By the end, you'll have a complete, fully functional 3D landing page to showcase your skills and inspire your next project. Plus, you'll have access to the entire source code, so you can follow along and create your own pages after this course. And if you need any help along the way, I'll be available to answer your questions and support you in developing your projects. Join me, and let's bring your ideas to life!
