Three.js 是一个基于 JavaScript 的 3D 图形库，它简化了在网页上创建和展示 3D 图形的过程，让开发者能够在浏览器中轻松实现各种复杂的 3D 场景和交互效果。

特点

• 完全基于 JavaScript，无需依赖其他插件或库。
• 支持多种渲染器，包括 WebGL、Canvas2D 和 CSS3D。
• 提供丰富的 3D 对象和材质，包括几何体、光照、纹理等。
• 支持动画、物理引擎、粒子系统等高级功能。
• 社区活跃，有大量的示例和教程可供参考。

核心概念

• 场景（Scene）： 3D 对象容器，如同舞台，所有元素需添加到场景中渲染。
• 相机（Camera）： 决定观察视角和范围，常用透视与正交相机。
• 渲染器（Renderer）： 将场景和相机组合，把 3D 场景渲染成 2D 图像，常用 WebGL 渲染器。
• 几何体（Geometry）： 定义 3D 对象形状，有内置和自定义类型。
• 材质（Material）： 决定几何体外观，如颜色、纹理、光泽，有多种类型。
• 网格（Mesh）： 几何体和材质的组合，是常见 3D 对象。

应用场景

• 游戏开发： 创建网页 3D 游戏。
• 数据可视化： 以 3D 图形直观呈现复杂数据关系和趋势。
• VR/AR： 开发基于浏览器的虚拟和增强现实应用。
• 建筑与室内设计： 展示设计方案，让客户提前感受空间布局。
• 教育和培训： 创建交互式 3D 教学内容，助于理解抽象概念。

安装

可以通过 npm 或 yarn 安装 Three.js：

npm install three

或

yarn add three

导入

import * as THREE from "three";