Three.js - 简介

所有现代浏览器都变得更加强大,并且更易于直接使用 JavaScript。它们采用了 WebGL(Web 图形库),这是一种 JavaScript API,它允许您使用 GPU(图形处理单元)的功能在任何兼容的 Web 浏览器中渲染高性能交互式 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。