|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/threejs-scrollable-pages-with-gsap/
课程评论：没有评论
**课程名称：** 使用 GSAP 和 WebGI 创建可滚动页面 - 自定义 Threejs 渲染器 **课程概述：** 本课程是一门关于如何利用 GSAP 和 WEBGi（一个定制的 Three.js 渲染器）创建交互式滚动体验的速成课程。WEBGi 能够帮助您开箱即用地创建逼真的效果，并提供出色的性能。课程将指导您如何在页面中嵌入 3D 模型，并通过滚动触发动画，从而创建具有高度互动性的页面。 **学习内容：** 课程将涵盖整个制作过程，从使用 Adobe XD 和 WEBGi 编辑器进行页面设计和素材获取，到使用提供的样板代码实现功能。您将与讲师一同逐步构建 HTML 和 CSS，学习如何安装 GSAP、配置各部分的动画，并找到合适的相机位置。此外，课程还将讲解如何将 3D 动画与其他页面动画相结合。 **主要教学模块：** * **项目目标介绍：** 明确课程将要完成的作品。 * **WEBGi 编辑器使用：** 配置 3D 模型及其与页面设计的集成。 * **样板代码设置：** 安装 WEBGi 及其依赖项。 * **素材导出与页面构建：** 使用 HTML 和 CSS 创建页面。 * **页面其他部分创建：** 为动画效果做好准备。 * **首个动画设置：** 实现第一个滚动动画。 * **更新函数与滚动控制：** 使用滚动来控制动画。 * **相机位置调整：** 找到最佳相机动画值。 * **全页面动画实现：** 为所有页面部分添加动画。 * **3D 模型与 HTML 动画融合：** 协调不同类型的动画。 * **性能优化与技巧：** 提升页面性能的实用建议。 * **总结与注意事项：** 课程回顾与未来发展方向。 **课程资源：** 学员将获得 Adobe XD 设计文件和项目的源代码，方便跟随学习和独立实践。课程也提供问答环节，帮助学员解决项目开发中的问题。 **目标学员：** 本课程适合已经具备一定 JavaScript 基础，并在电脑上安装了 Node.js 的学习者。
This is a crash course of scrollable experiences with GSAP and WEBGi. WEBGi is a custom threejs renderer that enables you to create realistic results out-of-the-box with great performance. I'll show you how to create interactive pages by embedding 3D models on a page with scroll-based animations.We will do the entire process together, from creating the page design using Adobe XD and the WEBGi editor to get the images, to implementing the code using a boilerplate provided. We will create all the HTML and CSS together, step by step, until we learn how to install GSAP and configure the animations for each section and find the correct values for each camera position. Next, we'll learn how to merge the 3D animations with the other animations on the page.The course content is organized as follows:What are we going to create?Using the WEBGi editor to configure the 3D model and its integration into the designInstalling the boilerplate to WEBGi and its dependenciesExporting the assets and creating the page with HTML and CSSCreating the other sections of the page and preparing for the animationsSetting up the first animationCreating the update function and using the scroll to control the animationHow to find the correct camera positions to animateAnimating all sections of the pageMerging the animations of the HTML elements with the 3D modelPerformance tweaks and other important tipsFinal thoughts and considerationsYou'll have access to the design created in Adobe XD format, as well as the project's source code, so you can follow along and create your own pages after this course. In addition, you will also have access to ask me questions to help you develop your projects.The course is suitable for those who already have some experience with Javascript and have Nodejs installed on their computer.
