使用 GSAP 掌握 Three.js 可滚动页面
在不到 1 小时的时间内学会使用 Three.js、WEBGi 和 GSAP 以及 ScrollTrigger 创建沉浸式 3D 对象体验
讲师：Anderson Mancini
口袋资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！
用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。
你将学到什么
- 学习使用 Threejs 和 GSAP 的scrollTrigger 创建体验
- 掌握基于滚动的动画的使用
- 了解如何在您的项目中集成 WEBGi 的使用以实现更真实的效果
- 将 3D 模型集成到您的设计中并创建丰富且身临其境的页面
- 免费提供源代码！
要求
- 具备 Javascript 基础知识并安装 NPM
描述
这是有关 Threejs、gsap 和 WEBGi 的可滚动体验的速成课程。我将向您展示如何通过在带有滚动动画的页面上嵌入 3D 模型来创建交互式页面。
我们将一起完成整个过程，从使用 Adobe XD 和 WEBGi 编辑器创建页面设计以获取图像，到使用提供的样板文件实现代码。我们将一步一步地一起创建所有 HTML 和 CSS，直到我们学习如何安装 GSAP 并为每个部分配置动画并找到每个摄像机位置的正确值。接下来，我们将学习如何将 3D 动画与页面上的其他动画合并。
课程内容安排如下：
- 我们要创造什么？
- 使用 WEBGi 编辑器配置 3D 模型并将其集成到设计中
- 将样板安装到 WEBGiz 及其依赖项
- 导出资源并使用 HTML 和 CSS 创建页面
- 创建页面的其他部分并准备动画
- 设置第一个动画
- 创建更新函数并使用滚动来控制动画
- 如何找到正确的相机位置来制作动画
- 对页面的所有部分进行动画处理
- 将 HTML 元素的动画与 3D 模型合并
- 性能调整和其他重要提示
- 最后的想法和考虑
您将可以访问以 Adobe XD 格式创建的设计以及项目的源代码，因此您可以在本课程结束后继续学习并创建自己的页面。此外，您还可以向我提问以帮助您开发项目。
本课程适合那些已经有一定 Javascript 经验并在计算机上安装了 Nodejs 的人。
本课程适合谁：
- 适合具有一定 JavaScript 基础知识并希望提升使用 Threejs 创建滚动体验知识的开发人员
- 对于想要了解在浏览器中使用 3D 的可能性的设计师
- 对于刚接触 Threejs 并希望更好地了解如何将 3D 与网页集成的人
声明：口袋资源网（koudaizy.com）提供的所有课程、素材等资源全部来源于互联网，赞助VIP仅用于对口袋资源服务器带宽及网站运营等费用支出做支持，从本站下载资源，说明你已同意本条款。
