Three.js 在 2025 年的三次跃迁：从网页特效到专业工具的蜕变

简介：2025-2026 年，Three.js 完成了三次关键跃迁。WebGPU 在所有主流浏览器落地，性能提升最高达 10 倍；AI 驱动的 vibe coding 成为年度词汇，让 3D 创作门槛大幅降低；应用场景从网页突破到物理装置，大阪世博会的百万粒子互动装置就是最好的证明。每周 270 万次的 NPM 下载量，碾压式领先竞品 270 倍。这不只是一个技术库的升级，而是整个 Web 3D 生态的集体进化。

如果你在 2020 年听说过 Three.js，可能会觉得它只是那些炫酷网站上用来做 3D 动画的小玩意儿。但到了 2026 年初，这个 JavaScript 3D 库已经彻底改变了游戏规则。

最近看到一篇技术文章，讲述了 Three.js 在过去两年里发生的巨大变化。这些变化不仅仅是技术层面的升级，更像是整个 Web 3D 生态的一次集体跃迁。作为一个关注技术趋势的普通读者，我发现这背后的故事远比表面上看起来更有意思。

第一次跃迁：技术标准的全面落地

2025 年 9 月，苹果终于在 Safari 26 中支持了 WebGPU。这个看似平淡无奇的更新，实际上标志着一个等待了多年的技术标准终于在所有主流浏览器上完成了部署。

WebGPU 到底是什么？简单来说，它是新一代的图形渲染技术标准。如果把 WebGL 比作十几年前的老式发动机，那 WebGPU 就是针对现代 GPU 重新设计的涡轮增压引擎。

它带来的核心改变包括：

  • 计算着色器（Compute Shaders）：可以在 GPU 上运行通用计算，比如物理模拟、机器学习推理、数据处理

  • 更好的资源管理：对 GPU 内存和状态有明确的控制权

  • 现代化的 API 设计：直接按照 GPU 的工作方式设计，不是从 OpenGL 翻译过来的

  • 性能提升：在大量绘制调用的场景下，性能可以提升最多 10 倍

简单说，以前那些“理论上可以但实际很卡”的效果，现在都能流畅运行了。

更关键的是，Three.js 团队在 2025 年 9 月发布的 r171 版本中，把 WebGPU 的使用门槛降到了极低。开发者只需要一行代码就能启用 WebGPU：

import { WebGPURenderer } from 'three/webgpu';

就这么简单。不需要配置打包工具，不需要安装额外的插件，而且如果用户的浏览器不支持 WebGPU，系统会自动切换回传统的 WebGL 2。这种无缝衔接的设计，让技术升级变得毫无风险。

Three.js 的版本演进也值得关注。r170（2025 年 8 月）把 WebGPU 模块移到了扩展包中，并增加了 GLTFLoader 支持。r171（2025 年 9 月）实现了零配置导入和 React Three Fiber 集成，这是真正的里程碑。r180 改进了纹理绑定和深度纹理处理。到 2025 年 12 月的 r182，WebGPU 已经完全成熟。

这让我想起智能手机刚普及的那几年。当所有人的手机都能流畅运行 4G 网络时，移动互联网才真正爆发。WebGPU 的全面落地也是同样的道理，当开发者不再需要担心兼容性问题时，真正的创新才会涌现。

有个实际案例很能说明问题。一家叫 Segments.ai (opens in a new tab) 的公司，专门为自动驾驶提供数据标注工具。他们的产品需要在浏览器里展示和处理激光雷达（LiDAR）点云数据，这些数据集通常包含数百万个 3D 点。

在使用 WebGL 的时候，问题很明显。界面经常卡顿，复杂场景会掉帧，用户在标注大型数据集时体验很差。迁移到 WebGPU 之后，结果令人惊讶：

  • 重度操作的性能提升了 100 倍

  • 百万级点云数据的交互变得流畅

  • 选择和标注工具的响应速度大幅改善

这些技术改进帮助他们拿下了自动驾驶行业几家头部公司的合同。这说明 Three.js 加 WebGPU 不再是做做网页特效的玩具，而是能支撑专业工具的生产力平台。

第二次跃迁：AI 时代的开发范式转变

2025 年 2 月，OpenAI 联合创始人 Andrej Karpathy 在推特上提到了一个新词：vibe coding，中文可以理解为“氛围编程”或“意图编程”。到了 12 月，这个词被柯林斯词典评为 2025 年度词汇。

什么是 vibe coding？就是用自然语言告诉 AI 你想要什么，然后 AI 帮你生成代码。听起来很玄，但在 Three.js 这个领域，它确实改变了很多人的创作方式。

Three.js 天然适合这种新的开发模式。首先，它只需要 JavaScript，不用配置服务器、数据库这些复杂的东西。其次，3D 效果是可视化的，你一眼就能看出 AI 生成的代码对不对。最重要的是，Three.js 的 API 设计得很友好，即使 AI 生成的代码不够完美，也不太容易彻底崩溃。

2025 年有个很火的活动，叫 Vibe Coding Game Jam，要求参赛者在 48 小时内用 AI 辅助工具做出一个可玩的游戏。结果收到了超过 1000 个作品，评委里还包括 Three.js 的创始人 mrdoob 和 Andrej Karpathy 本人。冠军作品是一个复古风格的 3D 出租车模拟游戏，完全由 AI 辅助完成。

这个趋势带来的影响是深远的。以前学 3D 编程需要啃厚厚的教程，理解复杂的数学原理。现在，一个有想法但技术基础薄弱的人，也能在 AI 的帮助下快速做出原型。这不是说专业技能不重要了，而是创作的门槛被大幅降低，更多人有机会把脑子里的想法变成现实。

想想看，当工具变得足够简单，创意才是最稀缺的资源。这对普通人来说其实是个好消息，因为好的想法从来不是程序员的专利。

第三次跃迁：从浏览器到物理世界

Three.js 还有一个很多人不知道的应用场景：物理装置。

2025 年大阪世博会上，有一个叫“连接之波”的互动装置。观众站在一个 98 英寸的 4K 大屏幕前，用身体动作控制屏幕上的浮世绘海浪。技术实现用的就是 Three.js 加 WebGPU，实时渲染大约 100 万个粒子，配合 Kinect 深度相机捕捉多人的肢体动作。

这个装置连续运行了 7 天，超过 1 万人次体验。据现场观察，很多小孩玩了一次还要排队再玩，连原本不太好意思的成年人最后也挥着胳膊笑得很开心。

这个案例说明了什么？Three.js 的应用场景已经突破了浏览器的边界。博物馆、零售店、展览活动、数字标牌，任何需要实时 3D 渲染的地方，都可以用 Three.js。而且因为代码逻辑是通用的，开发者在网页项目里积累的经验，可以直接迁移到物理装置上。

这种技能的可迁移性其实挺重要的。在这个技术快速迭代的时代，学一个东西能用在多个场景，投入产出比就高很多。

数据不会说谎

回到最现实的层面：市场选择。

Three.js 目前每周的 NPM 下载量是 270 万次，而它的竞争对手 Babylon.js 只有 1 万次，PlayCanvas 只有 8000 次。这不是小幅领先，而是 270 倍的差距。

这种碾压式的优势来自哪里？生态系统的自我强化。更多的开发者意味着更多的工具、更多的教程、更多的 Stack Overflow 答案，这又会吸引更多的开发者。Three.js 已经有超过 300 个官方示例，社区工具数以百计，React、Vue、Svelte 等主流框架都有成熟的集成方案。

2025 年，招聘市场上要求 Three.js 或 WebGL 技能的职位增长了 25%。这不是炒作，而是真实的市场需求。

未来还会有什么

文章最后提到了几个值得关注的趋势。

WebXR（浏览器里的 VR/AR 标准）正在成熟，随着头戴设备的普及，基于浏览器的沉浸式体验会越来越多。AI 生成的 3D 素材工具也在快速发展，以后做一个 3D 场景可能不需要手工建模，直接用 AI 生成材质和模型。还有 WebGPU 的计算着色器，可以在浏览器里直接运行机器学习模型，实时生成特效。

这些趋势串起来看，会发现一个清晰的方向：浏览器正在变成一个功能完整的应用平台，而不仅仅是展示网页的工具。Three.js 恰好站在了这个转变的中心位置。

写在最后

Three.js 在 2026 年的故事，表面上是一个技术库的升级，但往深了看，它反映的是整个 Web 技术栈的演进方向。

技术标准的统一降低了创新的成本，AI 工具的普及降低了创作的门槛，应用场景的拓展打开了更大的想象空间。这三股力量叠加在一起，让原本小众的 3D 编程变成了一个普通开发者也能快速上手的领域。

对于不写代码的普通人来说，这些变化意味着什么？也许是未来会看到更多有趣的网页体验，也许是博物馆和展览会变得更互动，也许是有一天你脑子里的创意可以更容易地被实现出来。

技术的进步最终会渗透到生活的方方面面，只是我们往往要等它真正到来的时候，才会意识到世界已经悄悄改变了。

原文：https://www.utsubo.com/blog/threejs-2026-what-changed (opens in a new tab)