Three.js 简介

你有没有想过这些图形和游戏是如何在网络浏览器上运行的？它背后的主要技术是什么？当然，仅使用 HTML 和 CSS 是不可能的。在前几天，我们使用 WebGL 来完成这项任务。 WebGL(Web graphics Library) 是 JavaScript API，用于在 Web 浏览器上渲染 3 维对象、2 维对象和图形。 WebGL API 允许用户通过 GPU 加速体验网页上的交互式内容，而无需先下载或安装任何插件。对于开发人员，WebGL 使用熟悉的 OpenGL ES 代码结构提供对硬件的低级访问。

WebGL 由 Mozilla 组织创建。有了 WebGL 的所有这些优点，WebGL 也有一些缺点，其中Three.js发挥了作用。 WebGL 是非常低级的系统，只绘制点、正方形和线等基本对象。使用 WebGL 做任何有意义的事情通常需要相当多的代码，这就是Three.js的用武之地。

什么是 Three.js？

Three.js 是一个开源 JavaScript 库，用于在 Web 浏览器上显示图形、3D 和 2D 对象。它在后台使用 WebGL API。 Three.js 允许您使用您的 GPU（图形处理单元）在 Web 浏览器的画布上渲染图形和 3D 对象。因为我们使用的是 JavaScript，所以我们也可以与其他 HTML 元素交互。 Three.js 由 Ricardo Cabello 于 2010 年 4 月发布。

为什么我们使用 Three.js？

由于 Three.js 是开源的，所以我们可以轻松地查看源代码并了解代码（函数）的功能。
当我们将 WebGL 用于图形时，它不支持大多数浏览器，但 Three.js 支持大多数浏览器。
它不需要任何第三方插件来运行代码。
您只需要使用一种编程语言 JavaScript 和非 HTML 即可。

如何在您的项目中包含 Three.js？

在项目中添加 Three.js 的方法有很多，其中一些非常简单，有些则有点复杂，但是它们都表示我们必须在项目中包含这些文件中的任何一个：

三.js
三分钟.js
三.module.js

这些所有文件都可以在 Three.js 的 GitHub 页面上找到。

方法 1：（下载完整的项目 Three.js）：最简单的方法是在您的系统上下载完整的 three.js 项目并使用那里的文件。

您可以从其 GitHub 页面下载最新版本的 three.js。下载后，打开它并查看构建文件夹，您会在其中找到三个脚本。

方法 2：（使用 NPM 或 YARN 安装 Three.js 的包）： Three.js 也可以作为 NPM 上的包提供。这意味着如果您在计算机上设置了 Node.js 和 NPM，那么您可以打开命令提示符并键入：

npm i three

然后，您可以通过引用三个包将 three.js 从 three.module.js 文件导入到您的 JavaScript 文件中：

import * as THREE from "three";

而且，如果您更喜欢 Yarn 而不是 NPM，那么您也可以在终端窗口中使用以下命令添加包：

yarn add three

方法 3：（使用 CDN 链接）：您可以从 CDN（内容交付网络）链接文件，这是一个专门用于托管文件的远程站点，以便您可以在网站中使用它们。

事实上，您甚至可以将 Three.js.org 站点用作 CDN。您可以使用以下链接链接 three.js 文件：https://threejs.org/build/three.js，并将其包含在您的 HTML 中，如下所示：

但是在使用three.js.org CDN 链接时存在问题，通过使用此链接，您将始终在更新版本上工作。当我们处于开发模式时很好，但是如果我们谈论生产，如果任何函数或语法随着更新而发生变化，那么您的代码将停止工作，所以我们建议使用这些站点的 CDN：

cdnjs.com
www.jsdelivr.com

就是这样，通过使用这些方法中的任何一种，您都可以在项目中使用 Three.js。