Three.js - 简介



所有现代浏览器都变得更加强大,并且可以直接使用 JavaScript 访问。它们采用了 WebGL(Web 图形库),这是一种 JavaScript API,允许您在任何兼容的 Web 浏览器中使用 GPU(图形处理单元)的功能渲染高性能交互式 3D 和 2D 图形。

但是 WebGL 是一个非常底层的系统,它只能绘制点、正方形和线等基本对象。然而,直接从 JavaScript 编程 WebGL 过程非常复杂且冗长。您需要了解 WebGL 的内部细节并学习复杂的着色器语言才能充分利用 WebGL。这时 Three.js 应运而生,让您的生活变得轻松。

什么是 Three.js?

Three.js 是一个开源、轻量级、跨浏览器、通用的 JavaScript 库。Three.js 在后台使用 WebGL,因此您可以使用它在浏览器中的 HTML <canvas> 元素上渲染图形。由于 Three.js 使用 JavaScript,因此您可以与其他网页元素交互,添加动画和交互,甚至创建一些逻辑的游戏。

为什么要使用 Three.js?

以下特性使 Three.js 成为一个优秀的库。

  • 您只需使用 JavaScript 即可创建复杂的 3D 图形。

  • 您可以在浏览器内创建虚拟现实 (VR) 和增强现实 (AR) 场景。

  • 由于它使用 WebGL,因此它具有跨浏览器支持。许多浏览器都支持它。

  • 您可以添加各种材质、纹理并对 3D 对象进行动画处理。

  • 您还可以加载和处理来自其他 3D 建模软件的对象。

只需几行 JavaScript 代码和简单的逻辑,您就可以创建任何东西,从高性能交互式 3D 模型到逼真的实时场景。

以下是一些使用 Three.js 创建的优秀网站:

您可以在 three.js 的官方网站上找到更多示例。

浏览器支持

目前,台式机和移动设备上的所有现代浏览器都支持 WebGL。唯一需要注意的浏览器是移动版 Opera Mini 浏览器。对于 IE 10 及更早版本,可以使用 IEWebGL 插件,您可以从 https://github.com/iewebgl/iewebgl./ 获取。您可以找到关于 WebGL 浏览器支持的详细信息 这里

了解了 Three.js 是什么之后,您可以继续下一章,了解如何设置项目以开始使用 Three.js。

广告

© . All rights reserved.