three.js 是基于 webgl 的 3d 库，核心包含场景、相机、渲染器三要素，支持几何体、材质、灯光与动画，广泛用于产品展示、数据可视化、游戏及虚拟展厅，降低前端 3d 开发门槛。
Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，它简化了在浏览器中创建和展示三维场景的过程。如果你希望在网页中实现3D模型、动画或交互式视觉效果，Three.js 是一个强大且易于上手的工具。它封装了 WebGL 的复杂性，让开发者无需深入了解图形底层也能快速构建3D内容。
Three.js 的核心组成部分
要使用 Three.js 构建一个基本的 3D 场景，需要理解以下三个核心要素：
- 场景（Scene）：场景是所有 3D 对象的容器，相当于舞台。你需要把模型、灯光、相机等添加到场景中才能被渲染出来。
- 相机（Camera）：相机决定了用户从哪个角度观看场景。最常用的是透视相机（PerspectiveCamera），它模拟人眼的视觉效果，远处的物体会显得更小。
- 渲染器（Renderer）：渲染器负责将场景和相机的内容绘制到网页的 canvas 元素中。Three.js 使用 WebGLRenderer 来利用 GPU 进行高效渲染。
这三个元素构成了 Three.js 应用的基础骨架。没有它们，就无法显示任何内容。
常见的 3D 对象与材质
在场景中添加可视对象是 Three.js 的关键步骤。常用的对象包括几何体（Geometry）和材质（Material），两者结合形成网格（Mesh）。
- 几何体：如 BoxGeometry（立方体）、SphereGeometry（球体）、PlaneGeometry（平面）等，定义了物体的形状。
- 材质：决定物体表面的外观，比如颜色、纹理、反光等。常用材质有 MeshBasicMaterial（不受光照影响）、MeshLambertMaterial（支持漫反射）、MeshPhongMaterial（支持高光）。
- 网格（Mesh）：由几何体和材质组合而成，可以被添加到场景中进行渲染。
例如，创建一个红色的旋转立方体，就是将 BoxGeometry 与 MeshLambertMaterial 结合，生成一个 Mesh，再加入场景并配合动画循环实现旋转效果。
灯光与动画的支持
为了使 3D 场景更真实，灯光必不可少。Three.js 提供多种光源类型：
- AmbientLight：环境光，均匀照亮所有物体，无方向性。
- DirectionalLight：平行光，类似太阳光，有方向性。
- PointLight：点光源，从一点向四周发光，如灯泡。
合理搭配光源可以让模型更具立体感。
动画则通过 requestAnimationFrame 实现。在每一帧中更新物体的位置、旋转或缩放，就能产生连续的动态效果。Three.js 提供了 Clock 和 AnimationMixer 等工具来管理复杂的动画序列。
实际应用场景
Three.js 广泛应用于多个领域：
- 产品展示：电商网站使用 3D 模型展示商品，用户可旋转查看细节。
- 数据可视化：将复杂数据以 3D 图表形式呈现，增强表现力。
- 游戏开发：用于构建轻量级 Web 游戏，尤其适合 H5 场景。
- 虚拟展厅与建筑可视化：实现室内漫游、建筑预览等交互体验。
结合 HTML、CSS 和 JavaScript，Three.js 能无缝集成到现代前端项目中，支持响应式设计和用户交互（如鼠标拖拽、触摸控制）。
基本上就这些。掌握 Three.js 的基础概念后，你可以逐步深入学习模型加载（支持 glTF、OBJ 等格式）、后期处理、阴影、物理引擎集成等高级功能。它降低了 3D 开发门槛，让前端开发者也能轻松打造沉浸式视觉体验。
