使用 Three.js 将 3D 元素添加到您的网站

已发表: 2019-11-02

平面设计很棒，但 3D 元素将网页设计布局提升到一个新的水平。 具有动画 3D 图形和交互式 3D 场景的网站正变得比以往任何时候都更加主流。 客户现在想要在他们的网站上使用这些类型的设计，他们会向您索要。 学习如何将 3D 设计融入您的网页设计项目只会改善您的职业道路并为您带来更多客户。 值得庆幸的是，Divi 设计人员和开发人员可以轻松使用 Three.js 等资源，将自定义 3D 元素添加到他们的网站。

在这篇文章中，我们将了解 Three.js 的基础知识以及为什么它是将 3D 元素添加到您的网站的不错选择。 是的，即使是您的 Divi 网站。 要开始使用 Three.js，您需要一些编码知识，特别是 HTML、CSS 和 Javascript。 如果您仍在学习如何编码，请从一开始就按照 Three.js 网站上的分步教程进行操作。 如果在何处添加代码的术语对您来说是陌生的，那么有很多教程可以引导您完成技术步骤。 我建议您观看一些视频，或者参加 Skillshare 或 Udemy 的课程，以真正了解如何将 Three.js 库整合到您的设计中。

让我们开始吧。

什么是 Three.js

首先，什么是 Three.js？

Three.js 是一个 javascript 3D 库，提供 <canvas>、<svg>、CSS3D 和 WebGL 渲染器。 它无需插件即可为您的浏览器带来 3D 设计。 该库可以帮助您创建简单的 3D 元素、复杂的 3D 交互和创意动画游戏。 Three.js 是一个带有 Github 存储库的开源库，用户可以在其中分享他们自己的 Three.js 创作。

在 Three.js 涵盖的所有渲染器中，最常用的是 WebGL。 仅使用 WebGL 创建 3D 元素需要大量代码行和大量数学知识。 Three.js 使创建场景和使用 WebGL 渲染它变得更加容易。

理解 3D 场景和 Three.js 术语

要使用 Three.js 创建 3D 动画，首先您必须了解 3D 场景是如何设置的。 构建 3D 设置所需的三个元素如下：

  1. 现场
  2. 相机
  3. 渲染器

该场景是您设置 Three.js 将显示的所有 3D 元素的地方。 从视觉上看，它类似于剧院舞台或电视机。 相机是场景的视角，也是人类如何从技术上看到场景中的元素。 渲染器将它们放在一起并绘制场景。 如果您精通 3D 动画，那么您肯定会认为这是设置场景的标准。

设置场景后，将对象放置在其中。 对象的构建分三步：

  1. 几何
  2. 材料
  3. 网格

对象的几何形状是形状的骨架或基本轮廓。 为了给几何体赋予颜色或纹理，应用了材料。 几何体和材料的组合称为网格。

Three.js 库已经有很多基本的几何图形供您使用。 无需从头开始构建它们。 您只需将它们从库中调用到您的代码中，然后自定义它们。 除了使用颜色的十六进制代码作为材质之外，您还可以使用图像创建纹理或在纹理库中找到它们。

设置场景并添加几何图形后，您可以添加函数来照亮场景、为对象设置动画等等。 除了 Three.js 库中可用的基本对象外，您还可以从在线库或您在 Blender 上创建的图像上传其他 3D 图像。

Three.js 入门

使用 Three.js 再简单不过了。 Three.js 网站包含您需要了解该库如何工作以及如何使用它的所有文档。

在 Three.js 网站和他们的 Github 上，您会找到最简单的 Three.js 应用程序代码的实时版本。 他们使用 JSFiddle 但你也可以看到它在 CodePen 或 Codesandbox.io 上工作

我建议您按照 Three.js 网站中的步骤来真正了解它是如何工作的。 使用 Codepen、您的终端或首选的编码软件。 整个 Three.js 库都可以在 Threejs.org 网站上找到，一旦你设置好你的场景并开始注意到可以做什么。 下面您可以看到在 JSFiddle 上运行的基本 Three.js 应用程序。 单击“使用 JSFiddle 编辑”以使用代码。

Three.js 学习资源

由于 Three.js 是一个开源 API，所以他们的 GitHub 存储库上总会发生一些事情。 这意味着总是有很多新东西需要学习。 值得庆幸的是，他们创建了一个数字手册，该手册会不断更新以进行更改。 您可以在discoverthreejs.com 上找到它。 这是迄今为止最好的资源。 如果您需要有关如何设置应用程序和使用库资产的分步教程，这里有一个关于 Skillshare 的精彩课程，可引导您完成 Three.js 文档中的所有步骤。

同样，此 YouTube 教程向您展示了使用 Three.js 设置场景的基础知识，但希望您了解基本的 Web 开发技能。

如果您想深入了解 Three.js 和 WebGL，这门 Udemy 课程将解释这一切，并有望让您在课程结束时流利地创建 3D 内容。

正在寻找详细、快速和肮脏的教程？ 这个关于 CreativeBloq 的分步代码教程正是您所需要的。

三.js 例子

没有什么比使用 Three.js 开始设计您自己的 3D 设计的一些灵感更好的了。 要查看一些令人难以置信的 Three.js 创作，只需访问他们的网站并探索即可。

在 Divi 中使用 Three.js

在 Divi 中使用 Three.js 非常简单。 您只需要将 javascript 库添加到您的项目文件并将其添加到您的 HTML 中。 要将应用程序添加到任何 Divi 布局，请首先在您喜欢的编码软件或计算机终端上单独创建 3D 设计。 构建完成后，将 javascript 复制到代码模块中。 确保使用开始和结束 <script> 标签。

结论

Three.js 是用于向网站添加 3D 元素的强大资源。 在这篇文章中，我们研究了 Three.js 工作原理的基本知识。 API 有很多内容，您真的必须深入研究并进行实验。 可能性真的是无穷无尽的。 从简单的旋转立方体到丰富的数字世界中的复杂互动游戏。 你会用 Three.js 创建什么？

精选图片来自 theromb/shutterstock.com