【Udemy中英字幕】Master Three.js Scrollable pages with GSAP

使用 GSAP 掌握 Three.js 可滚动页面

在不到 1 小时的时间内学会使用 Three.js、WEBGi 和 GSAP 以及 ScrollTrigger 创建沉浸式 3D 对象体验

讲师：Anderson Mancini

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

你将学到什么

• 学习使用 Threejs 和 GSAP 的scrollTrigger 创建体验
• 掌握基于滚动的动画的使用
• 了解如何在您的项目中集成 WEBGi 的使用以实现更真实的效果
• 将 3D 模型集成到您的设计中并创建丰富且身临其境的页面
• 免费提供源代码！

要求

• 具备 Javascript 基础知识并安装 NPM

描述

这是有关 Threejs、gsap 和 WEBGi 的可滚动体验的速成课程。我将向您展示如何通过在带有滚动动画的页面上嵌入 3D 模型来创建交互式页面。

我们将一起完成整个过程，从使用 Adob​​e XD 和 WEBGi 编辑器创建页面设计以获取图像，到使用提供的样板文件实现代码。我们将一步一步地一起创建所有 HTML 和 CSS，直到我们学习如何安装 GSAP 并为每个部分配置动画并找到每个摄像机位置的正确值。接下来，我们将学习如何将 3D 动画与页面上的其他动画合并。

课程内容安排如下：

• 我们要创造什么？
• 使用 WEBGi 编辑器配置 3D 模型并将其集成到设计中
• 将样板安装到 WEBGiz 及其依赖项
• 导出资源并使用 HTML 和 CSS 创建页面
• 创建页面的其他部分并准备动画
• 设置第一个动画
• 创建更新函数并使用滚动来控制动画
• 如何找到正确的相机位置来制作动画
• 对页面的所有部分进行动画处理
• 将 HTML 元素的动画与 3D 模型合并
• 性能调整和其他重要提示
• 最后的想法和考虑

您将可以访问以 Adob​​e XD 格式创建的设计以及项目的源代码，因此您可以在本课程结束后继续学习并创建自己的页面。此外，您还可以向我提问以帮助您开发项目。

本课程适合那些已经有一定 Javascript 经验并在计算机上安装了 Nodejs 的人。

本课程适合谁：

• 适合具有一定 JavaScript 基础知识并希望提升使用 Threejs 创建滚动体验知识的开发人员
• 对于想要了解在浏览器中使用 3D 的可能性的设计师
• 对于刚接触 Threejs 并希望更好地了解如何将 3D 与网页集成的人