Web 3D 领域迎来现象级爆发!Three.js 官方宣布其周下载量突破 400 万,从 2022 年的 100 万一路飙升,成为近五年增长最快的前端开源项目之一。这个由中途退学的艺术生 Ricardo Cabello(网名 Mr.doob)在 2010 年创建的 JavaScript 3D 图形库,如今已渗透到我们生活的方方面面 —— 旋转的 3D 商品展示、交互感十足的官网动画、数据可视化大屏,甚至元宇宙场景,背后都有它的身影。
AI 的爆发成为其增长的关键催化剂,让曾经需要图形学专家才能驾驭的 3D 开发,变成前端开发者触手可及的创意工具。而这一切的起点,源于一位艺术生对 “让 Web 3D 更简单” 的执着追求。
一、指数级增长:从小众工具到 Web 3D 基础设施
Three.js 的增长曲线堪称开源项目的教科书级案例,十年磨一剑,最终在 AI 时代迎来爆发:
-
2016-2018 年(起步期):周下载量维持在低位,仅被少数图形学爱好者和专业开发者使用,Web 3D 尚未成为主流需求;
-
2019-2020 年(爬升期):随着电商 3D 展示、数据可视化需求兴起,周下载量缓慢攀升至 20-50 万,开始进入前端开发者视野;
-
2021-2022 年(加速期):突破 100 万大关,WebGL 技术普及让 3D 内容成为提升产品体验的重要手段;
-
2023-2024 年(快速增长期):生成式 AI 爆发,周下载量从 100 万翻倍至 200 万,AI 降低开发门槛的效应初步显现;
-
2025-2026 年(爆发期):周下载量直冲 400 万,AI 辅助开发工具成熟、WebGPU 支持落地,Three.js 成为前端必备技能。
如今,Three.js 已成为 Web 3D 开发的事实标准,超过 80% 的浏览器 3D 应用基于其构建,与 Babylon.js、A-Frame 形成 “一超多强” 的格局 ——Three.js 以易用性和社区优势占据中小项目主流,Babylon.js 聚焦大型游戏与 VR/AR,A-Frame 则主打 VR 快速开发。
二、AI 革命:3D 开发从 “劝退” 到 “人人可用”
在 AI 介入之前,Three.js 的开发门槛足以让 90% 的前端开发者望而却步:需要理解四元数、矩阵变换等复杂数学概念,手工建模、材质调试、光照优化等流程繁琐,一个简单的粒子特效可能需要数小时调试。而 AI 的出现,彻底改写了游戏规则:
1. 自然语言转 3D 代码,创意秒落地
无需记忆复杂 API,只需用自然语言描述需求,AI 就能生成 95% 可用的代码。比如输入 “用 Three.js 写一个赛博朋克风格的旋转发光立方体,背景是动态粒子星空”,ChatGPT、Claude Code 等工具几秒内就能输出完整代码,包含场景搭建、材质设置、动画循环,甚至优化性能的细节。
2. 专业技能模块化,新手也能出精品
GitHub 上的threejs-skills开源项目,为 AI 提供了结构化的专业知识库,涵盖基础建设、几何材质、光照阴影、着色器、后处理等全场景技能。AI 不再 “瞎蒙” 代码,而是能做出专业选择:
-
加载模型时自动启用 Draco 压缩,减少文件体积;
-
写自定义着色器时遵循 GLSL 规范,正确处理坐标转换;
-
配置光照时避免 “一片死黑”,自动设置阴影贴图精度。
3. 版本升级无痛适配,新特性快速上手
Three.js 160 版本新增 WebGPU 支持、体积雾渲染等重磅特性,AI 能帮助开发者快速适配:
-
自动切换 WebGPU 渲染器,渲染 1 万面模型帧率从 28fps 提升至 55fps,性能翻倍;
-
一键实现电影级体积雾效果,模拟光线穿透雾气的丁达尔效应;
-
处理版本兼容问题,老项目升级时自动修正不兼容 API。
三、幕后缔造者:退学艺术生的 “代码 + 艺术” 传奇
Three.js 的成功,离不开其创始人 Ricardo Cabello 独特的成长经历,艺术与技术的碰撞塑造了它的核心气质:
1. 不循规蹈矩的成长之路
Ricardo 的学习经历堪称 “非主流”:小学后学习漫画绘画,中学转向电子工程,后又改读艺术方向,最终在进入大学前选择退学。真正塑造他的,是活跃于 demoscene(演示场景)社群的经历 —— 这个以技术与创意竞赛为核心的圈子,逼着创作者不断产出新作品,让他在实践中系统性学习计算机图形学,将艺术感知与代码能力深度融合。
2. 开源哲学:克制与开放的平衡
Ricardo 以 “风格克制、标准严格” 著称,这种理念贯穿 Three.js 十余年的演进:
-
拒绝无序堆叠功能,宁可引入破坏性更新,也不保留历史包袱,让 API 始终保持清晰简洁;
-
坚持开源共享,认为 “让整个互联网受益是极具成就感的事”,吸引全球开发者参与贡献;
-
注重实用与创意的平衡,既提供稳定可靠的核心功能,又鼓励开发者探索浏览器 3D 的边界。
3. 从个人项目到生态基石
创建 Three.js 的初衷,源于 Ricardo 的两个执念:一是好奇心驱动,想知道自己亲手写 3D 引擎能做到什么程度;二是解决实际痛点 ——demoscene 圈子里开发者常为临时 demo 写一次性引擎,浪费大量精力,他想做一个可复用、持续演进的 3D 引擎。如今,这个个人项目已成长为拥有庞大生态的基础设施,他维护的个人网站mrdoob.com仍在持续探索物理模拟、交互艺术等实验性项目,为 Three.js 注入创意活力。
四、核心价值:让 Web 3D 开发 “降维”
Three.js 的成功,本质是解决了 Web 3D 开发的核心痛点 —— 把复杂的 WebGL 底层 API 封装成简洁易用的接口,让开发者无需关注底层实现,专注创意表达:
1. 全场景功能覆盖
从基础的几何体创建、材质设置,到复杂的骨骼动画、光照系统、后处理效果,Three.js 提供一站式解决方案。官网示例涵盖 150 + 场景,从角色动画(跑、跳、面部表情控制)到物理模拟,开发者可直接复用修改。
2. 无缝兼容与扩展
-
跨浏览器支持:自动适配 Chrome、Edge、Safari 等主流浏览器,不支持 WebGL 的环境可优雅降级;
-
生态丰富:支持 GLB、GLTF 等主流 3D 模型格式,可与 React、Vue 等前端框架无缝集成,还有大量第三方插件补充物理引擎、VR/AR 等功能;
-
硬件加速:最新版本深度支持 WebGPU,相比 WebGL 并行计算能力更强、内存占用更低,渲染性能提升最高达 113%。
3. 低门槛高上限
新手能通过 AI 生成代码快速入门,专家可深入底层自定义着色器、优化渲染性能,满足从简单动画到大型元宇宙场景的全层级需求。
五、未来趋势:AI+WebGPU,开启 Web 3D 新纪元
Three.js 的爆发只是开始,随着技术演进,其应用边界还在持续扩展:
-
AI 深度融合:未来 AI 不仅能生成代码,还能直接创建 3D 模型、优化场景性能,甚至根据用户反馈自动调整 3D 交互逻辑;
-
WebGPU 全面普及:Three.js 对 WebGPU 的支持将进一步完善,让浏览器 3D 渲染性能比肩原生应用,支持更复杂的元宇宙场景和大规模粒子特效;
-
WebXR 拓展:与 VR/AR 设备的适配将更成熟,推动教育、医疗、工业等领域的沉浸式应用落地;
-
生态标准化:随着
threejs-skills等项目的发展,AI 辅助 3D 开发将形成统一规范,进一步降低准入门槛。
结语:创意驱动的技术革命
Three.js 的故事,是创意战胜规则、坚持成就伟大的典范。一位退学的艺术生,凭借对 “让 Web 3D 更简单” 的执着,打造出影响全球的开源项目;而 AI 的到来,又让这份创意工具触达更多人,催生无限可能。
如今,Three.js 已不再只是一个 3D 图形库,而是 Web 3D 生态的基础设施,是前端开发者实现创意的 “魔法棒”。对于开发者而言,现在正是入局的最佳时机 —— 借助 AI 工具,你无需成为图形学专家,就能用 Three.js 打造出惊艳的 3D 体验。


