- Three.js 教程
- Three.js - 首页
- Three.js - 简介
- Three.js - 安装
- Three.js - Hello Cube 应用
- Three.js - 渲染器和响应性
- Three.js - 响应式设计
- Three.js - 调试和统计
- Three.js - 相机
- Three.js - 控件
- Three.js - 光照与阴影
- Three.js - 几何体
- Three.js - 材质
- Three.js - 纹理
- Three.js - 绘制线条
- Three.js - 动画
- Three.js - 创建文本
- Three.js - 加载 3D 模型
- Three.js - 库和插件
- Three.js 有用资源
- Three.js - 快速指南
- Three.js - 有用资源
- Three.js - 讨论
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。