内容 隐藏
1 使用 GSAP 掌握 Three.js 可滚动页面
2 Master Three.js Scrollable pages with GSAP
2.1 你会学到什么
2.2 要求
2.3 描述
2.4 本课程适合谁：

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

Master Three.js Scrollable pages with GSAP

在不到 1 小时的时间内学习使用 Three.js、WEBGi 和 GSAP 以及 ScrollTrigger 创建身临其境的 3D 对象体验

你会学到什么

  • 学习使用 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 创建 Scroll 体验方面发展知识的开发人员
  • 对于想要了解在浏览器中使用 3D 的可能性的设计师
  • 对于刚接触 Threejs 并希望更好地了解如何将 3D 与网页集成的人

2023/8/12 更新 从1 小时 12 分钟更新到2小时52分钟

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。