大家好，我是蓝戒。本篇我们来聊聊：“谷歌开源Three-Live”。
平时喜欢让大模型帮忙写前端页面的朋友，肯定都试过这么一个玩法：在对话框里输入一句*“帮我用 Three.js 写一个会旋转的 3D 蓝色水晶球”*，现在的 AI 不出十秒钟就能给你吐出一大段 JavaScript 代码。
但在真正做产品开发的工程师眼里，AI 写出来的这段 3D 代码，往往是个“食之无味、弃之可惜”的烫手山芋。原因其实非常实在：
- 第一是“不敢直接跑”：大模型实时生成的代码充满不确定性，万一里面夹带了一行偷偷向外发网络请求的脚本，或者因为算错了一个数字，决定给一张普通的茶几画上 400 万个三角形网格，用户的浏览器或手机页面当场就会卡死闪退。
- 第二是“在手机 App 里跑不动”：传统的
Three.js是专门给网页浏览器设计的。如果你想在安卓或苹果原生手机 App 里展示这个 3D 物体，以前只能硬塞一个笨重的内置网页框（WebView）去跑，不仅耗电发热，还没法直接调用手机系统自带的高性能 3D 渲染引擎和增强现实（AR）相机。 - 第三是“只能看不能摸”：AI 顺手写出来的代码大多是个死板的动画循环，你想伸手去捏一下、量个尺寸、或者把它摆到自己真实的办公桌上看看效果，还得自己再去手写几百行复杂的空间交互逻辑。
怎么才能既享受“让 AI 一句话写 3D 代码”的爽快，又彻底解决安全卡死和手机端跨平台渲染的难题？
就在 11 月 3 日至 4 日，谷歌官方开源博客正式宣布开源了一款采用 Apache 2.0 协议的轻量级跨平台工具——Three-Live。
更让人津津乐道的是这款工具的诞生背景：谷歌在公告开头坦诚透露，整个 Three-Live 项目，是由谷歌自家的编程智能体 Google Antigravity 配合一位产品经理（前软件工程师）全程编写完成的！ 换句话说，谷歌用自家的 AI，造出了一个专门用来“驯服和检查 AI 所写 3D 代码”的安全编译器。今天咱们就用通俗易懂的语言，聊聊这个神奇的工具到底是怎么运转的。
一、核心巧思：“脚本进、模型文件出”，5 毫秒给 AI 代码做完安检
很多人在看到 Three-Live 之前，脑子里的思路都是“怎么在网页里盯着 AI 写的代码别出事”。而 Three-Live 换了一个极其干脆利落的思路：既然不放心让 AI 写的代码直接在用户面前运行，那干脆在后台用几毫秒把它变成一个纯粹的 3D 模型文件！
为什么说“变成文件”就彻底安全了？因为一段 JavaScript 代码可能会死循环、可能会偷偷联网，但一个标准的 3D 模型文件（比如安卓通用的 .glb 格式或苹果专用的 .usdz 格式）只是一堆老老实实的形状、材质和动画数据，它永远不可能自己发起网络请求。
为了实现这一步“点石成金”，Three-Live 在底层设计了一条极速的三步流水线：
- 先关进“断网铁笼”里试运行（双端沙箱隔离）：当你把大模型生成的
Three.js代码喂给 Three-Live 时，在网页端，它会把代码扔进一个彻底阉割了所有联网能力（提前删光了fetch、WebSocket等网络功能）的独立后台线程里；而在安卓、苹果手机以及命令行端，它甚至根本不需要浏览器，而是直接在本地塞进了一个用 Rust 语言编写的微型编译器（内置同样由 Rust 打造的 Boa 引擎）来消化这段代码。 - 严卡“工作量上限”，防卡死防爆内存：在沙箱运行代码的过程中，系统像一位严厉的监工一样盯着两块秒表：一是运行时间上限，超时立刻掐断；二是图形数量上限（严格限制顶点、三角形、网格和贴图的数量）。哪怕 AI 脑袋发热想画一个几百万面的复杂怪物，也会被配额数字当场拦下，绝不连累外面的主程序。
- 2 到 5 毫秒极速打包，交给各平台原生引擎渲染：代码在沙箱里把形状、金属反光材质和动画轨迹搭好后，Three-Live 只需要 2 到 5 毫秒（一眨眼都不到），就会在内存里把它直接打包成标准的
.glb和.usdz3D 模型数据。接下来，网页端用极简组件渲染，安卓端直接喂给谷歌原生的 Filament 引擎，苹果端则直接交给系统的 RealityKit 引擎——完全抛弃了笨重的内置网页框，每一台设备都能跑出最丝滑的原生帧率！
二、一行标签搞定 3D 与 AR：不仅能双指抓取，还能把图纸“爆炸拆开”
对于前端和移动开发者来说，Three-Live 最讨喜的地方在于它把使用门槛压到了最低。
以前在网页里搭一个带工作室灯光反射、阴影和镜面高光的 Three.js 场景，至少要写好几十行初始化模板代码，引用的完整库文件动辄几百 KB。而现在，Three-Live 借鉴了大家熟悉的网页标签写法，整个标准运行包压缩后只有 45 KB 到 58 KB 左右（如果只需要展示现成模型，纯查看器版本更是只有惊人的 23 KB）。
你只需要在网页 HTML 里写上一对 <three-live> 标签，把 AI 生成的那几行核心物体描述塞进去，它就能自动帮你配上影棚级光影、鼠标拖拽旋转视角，并在手机上自带一个“一键投射到真实房间（AR）”的按钮：
HTML
<!-- 仅需一个标签，即可在沙箱中安全渲染 AI 编写的 3D 扭结动画并开启 AR 支持 -->
<three-live allow-client-scripts camera-controls ar shadow-intensity="1" environment-image="studio">
<script type="text/three-live">
const knot = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.6, 0.2, 128, 32),
new THREE.MeshStandardMaterial({ color: 0x4285f4, metalness: 0.85, roughness: 0.15 })
);
scene.add(knot);
// 自动烘焙为 4 秒循环播放的标准 glTF 动画
scene.userData.animate = (t) => {
knot.rotation.y = t * (Math.PI / 2);
};
</script>
</three-live>
如果你戴着混合现实（XR）头显或者用手机开启了沉浸式空间模式，它的配套扩展包 xr-live（通过 <xr-live> 标签调用）更是直接解锁了一整套“伸手就能玩”的空间交互能力。特别是在随公告同步更新的 v1.2.x 版本中，官方一口气内置了 14 款开箱即用的空间计算插件（XRSpatial）：
| 空间交互功能 | 实际体验效果（无需手写复杂物理代码） | 典型应用场景 |
| 双手自然手势交互（6DoF） | 支持单手捏合（Pinch）、抓取移动（Grab）、双手拉开缩放物体大小 | 在 AR 视野里把家具、潮玩或商品模型抓起来全方位端详 |
| 空间卷尺与自动吸附（Snapping） | 点对点拉出虚拟卷尺实时显示三维尺寸框，支持把物体精准吸附到桌面或插槽上 | 家居摆放预览、装修尺寸测量、工业零件组装演练 |
| 零件爆炸拆解视图（Exploded View） | 一键把多层嵌套的复杂模型像科幻片里那样向四周均匀拆散开来 | 机械工程（CAD）装配体结构展示、电子产品内部构造拆解教学 |
| 眼神凝视选择（Gaze-Dwell） | 在不便抬手的场景下，目光盯着某个部件停顿片刻即可自动选中触发交互 | 头显端免手柄浏览、医疗或车间免接触查阅三维图纸 |
| 空间内实时语音/文字生成 3D | 人已经在 AR/VR 房间里了，直接开口说句话，现场实时合成新 3D 物体摆在眼前 | 沉浸式头脑风暴、游戏关卡快速白盒搭建、空间教育互动 |
三、天生的“AI 编程搭档”：仓库里直接给智能体备好了说明书
既然这套工具本身就是由 Google Antigravity 编写、专门用来配合大模型干活的，它在对待其他 AI 编程助手时也表现出了极高的默契度。
平时我们让 AI 用一个新发布的开源库写代码，最头疼的就是 AI 没见过这个新库，写出满篇报错的旧语法。而在 Three-Live 的开源仓库根目录里，团队直接预置了一整套专门喂给 AI 编程助手看的“营养餐”：包括标准的 AGENTS.md 智能体指引文件、专门提炼好的 llms.txt 与 llms-full.txt 上下文文档、拿来就能套用的代码食谱（Cookbook），甚至还打包好了标准的 SKILL.md 技能文件。
不管你平时用的是 Google Antigravity、Claude Code 还是 Cursor，只需要把仓库里的这份说明文档丢给你的智能体读一遍，它就能立刻掌握 Three-Live 支持的所有三维图形、材质和空间交互写法，一句废话不多说，直接给你生成既安全又能交互的 3D 场景。
四、上手尝鲜前，这三个客观细节要先留心
聊完了它让人眼前一亮的巧思，咱们最后依然本着实事求是的原则，提醒大家在动手集成时注意三个现实细节：
- 安装时请直接拉取最新的
1.2.2版本，别照抄博客里的1.0.0版本号：这一点非常关键！有细心的海外开发者在实测时发现，谷歌官方博客文章里的示例代码写的是引用three-live@1.0.0的链接，但实际上代码仓库进化得比博客审稿快得多——发布当天 npm 上的真实可用版本已经直接迭代到了1.2.1和1.2.2（而且前面提到的 14 个空间交互插件也是在1.2.0才正式合入的）。大家在用 npm 安装或引用 CDN 时，记得直接指定最新的1.2.2版本，避免踩空报错。 - 它只认“声明式子集”，太偏门的自定义着色器会自动降级：为了让一段代码能同时在网页、安卓原生引擎和苹果原生引擎上展现出一致的效果，Three-Live 只开放了
Three.js中最常用、最标准的那一批几何体和物理材质构造函数。如果大模型在代码里写了一段极其冷门的自定义底层着色器（Shader）或者不支持的类，编译器不会直接崩溃，而是会静默把它替换成普通标准材质并在控制台打一行提醒。因此，先让你的 AI 读一遍仓库里的白名单手册（llm-guide.md）再写代码，效果会好得多。 - 定位是轻量级排头兵，重度头显开发仍有老大哥
XR Blocks：谷歌在公告里把话说得很实在：Three-Live 目前处于开发者预览阶段（Developer Preview），属于谷歌非官方商业承诺的轻量级开源工具，你可以把它看作是安卓 XR 官方大型框架 XR Blocks 的“轻骑兵搭档”。如果你的目标是花几分钟在现有的手机 App 或网页里安全地嵌入 AI 生成的 3D 商品展示、教学模型或轻量 AR 互动，Three-Live 是目前最省心的选择；但如果你要开发大型商业 VR 游戏，还是得靠完整的游戏引擎或重型框架。
总的来说，谷歌开源的 Three-Live 给整个 AI 应用开发圈提供了一个非常漂亮的解题思路：不要试图去赌大模型每次写出来的代码都百分之百老实，而是用一层轻巧的 Rust 沙箱编译器，在几毫秒内把不可信的动态代码“凝固”成安全的标准资产。手里有网页或移动端项目想加点 3D 新花样的朋友，不妨去 npm 上搜一下 three-live，试试让 AI 当场给你捏个立体小世界吧！
文章评论