three.js

Three.js 是由 Ricardo Cabello（mrdoob）于 2010 年发起的开源 JavaScript 3D 库，封装 WebGL 底层细节，让开发者通过场景、相机、材质等对象模型在浏览器中构建 3D 内容，现已成为 GitHub 上最流行的 Web 3D 库。

它能做什么

Three.js 覆盖从简单几何体到复杂工业级 3D 应用的完整能力链。

• 内置几何体：提供 BoxGeometry、SphereGeometry、CylinderGeometry 等 20+ 常用形状，以及 ExtrudeGeometry、TubeGeometry 等高级几何体
• 材质系统：包含 MeshBasicMaterial、MeshLambertMaterial、MeshStandardMaterial、MeshPhysicalMaterial 等多种材质，支持 PBR 渲染
• 光照模型：支持 AmbientLight、DirectionalLight、PointLight、SpotLight、RectAreaLight 等，配合阴影映射实现真实光照效果
• 相机类型：透视相机（PerspectiveCamera）和正交相机（OrthographicCamera），以及立体相机（StereoCamera）用于 VR
• 动画系统：内置 AnimationMixer、AnimationClip、KeyframeTrack 等，支持骨骼动画和属性动画
• 加载器生态：支持 GLTF、OBJ、FBX、STL 等模型格式，以及 TextureLoader、CubeTextureLoader、CompressedTextureLoader 等纹理加载器
• 后期特效：通过 PMREMGenerator、EffectComposer 等实现环境贴图、辉光、景深等效果
• 辅助工具：AxesHelper、GridHelper、CameraHelper、SkeletonHelper 等调试工具，以及 OrbitControls、FlyControls 等交互控制器

适合谁用

从个人开发者到企业团队，Three.js 降低了 Web 3D 的入门门槛。

• 前端开发者：无需精通图形学底层，用 JavaScript 即可创建 3D 场景
• 游戏开发者：适合开发基于浏览器的 3D 游戏，API 丰富可专注游戏逻辑
• 数据可视化工程师：用于构建交互式 3D 数据图表和产品展示
• 建筑与设计行业：在网页上呈现逼真的建筑模型，辅助方案沟通
• 教育领域：创建 3D 教学模型，帮助学生理解抽象概念
• 数字艺术家：用于艺术装置、互动展览和实时渲染短片

怎么上手

官方提供完整的文档、示例和学习资源，社区也有大量教程。

• 官方文档：https://threejs.org/docs/ 包含所有 API 的详细说明和示例代码
• 示例库：官网 examples 页面提供数百个可直接运行的 Demo，覆盖常见场景
• 学习路径：官方推荐 Three.js Journey 付费课程，以及社区整理的免费指南
• 开发工具：官方提供在线编辑器（Editor）和 Needle devtools 浏览器扩展
• 社区支持：GitHub 仓库、Discord 论坛、Stack Overflow 等渠道可获取帮助

收费与限制

Three.js 本身完全免费开源，但部分高级学习资源需要付费。

• 核心库：MIT 协议，可自由用于商业和非商业项目
• 官方课程：Three.js Journey 为付费课程，提供系统性教学
• 第三方资源：部分高级模型、插件或教程可能需要付费购买
• 浏览器兼容：需要支持 WebGL 的现代浏览器，不支持 IE 等老旧浏览器

常见问题

Q1：Three.js 和原生 WebGL 相比有什么优势？

A1：Three.js 封装了 WebGL 的复杂 API，开发者无需编写 GLSL 着色器代码或手动管理缓冲区。例如在原生 WebGL 中画一个红色三角形需要上百行代码，而 Three.js 只需十几行。Three.js 还内置了场景管理、相机控制、光照计算、模型加载等高级功能，大幅提升开发效率。

Q2：Three.js 的 r185 版本有什么新特性？

A2：r185 是 Three.js 的最新稳定版本，具体更新内容可查看官方 GitHub 的 Release Notes。通常每个版本会修复 bug、优化性能、增加新功能（如新的几何体、材质或加载器）。建议开发者始终使用最新版本以获得出色兼容性和性能。

Q3：Three.js 能用于移动端吗？

A3：可以。Three.js 基于 WebGL，现代移动浏览器（如 Chrome for Android、Safari on iOS）均支持。但移动端 GPU 性能有限，建议优化模型面数、纹理大小和绘制调用次数，并考虑使用 LOD（细节层次）或降低渲染分辨率。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。