AI 3D建模工具： Tripo 3D | Meshy AI
Three-Live 交互式 Studio 在浏览器中运行，左侧是实时的程序化 three.js 控制项，右侧是带金属与自发光材质的实时 PBR 3D 场景

Jonathan Bingham，AI Foundations

想给 Web 或移动应用加上 AI 生成的 3D 或 XR？不知道从哪开始？这就是我们做开源跨平台项目 Three-Live 的原因——它完全由 Google Antigravity 写成，合作者是某位从软件工程师转成产品经理的人。（Three-Live 不是 Google 官方支持的产品。）

你可以把 Three-Live 理解成 XR Blocks 的简单、非官方伴随项目——XR Blocks 是 Android XR 那套功能更完整的 Web 端跨平台 XR 框架。Three-Live 的目标是让"AI 用 three.js 写出来的 3D 和 XR"容易起步。它把 <model-viewer> 那种熟悉的开发体验、原生移动库，以及一个沙箱编译器结合起来——后者用于在设备上或服务端编译不受信任的、由 LLM 生成的 JavaScript。

大语言模型在写软件这件事上已经变得相当擅长，其中包括用程序化的 three.js JavaScript 生成描述物体、材质、灯光和动画的 3D 代码。但运行时生成的 AI 代码是不可信的，需要安全沙箱才能安全执行。另外，移动设备本身就对 3D 和 XR 渲染有原生支持，硬逼它们跑 webview 会限制性能。

今天，我们很高兴发布 Three-Live（v1.0.0，Developer Preview），采用 Apache 2.0 许可。它是一个轻量的跨平台开源库与设备端编译器，把"AI 生成的 three.js 代码"和"Web、Android、iOS 上的高性能 3D、AR、WebXR 渲染"之间的缺口补上。

流程图：一段程序化 three.js 脚本进入设备端的 Three-Live 沙箱，在毫秒级时间内编译成二进制 glTF 2.0（GLB）与 USDZ，分别供 Web 上的 WebGL2/WebXR、Android 上的 Google Filament 与 Scene Viewer、iOS 上的 RealityKit 与 Quick Look 使用

Three-Live 是如何工作的

Three-Live 不把 three.js 当作只在浏览器里跑的渲染循环，而是把 three.js API 的一个声明式子集当作一种通用的、可移植的场景描述语言：

带严格资源配额的沙箱执行：在 Web 上，不受信任的脚本在一个隔离的 Web Worker 里执行（还可以再叠一层不透明源（opaque-origin）的沙箱 <iframe>），其中网络原语（fetch、XMLHttpRequest、WebSocket、动态 import()）在任何一行用户代码运行之前就被剥掉。在 Android、iOS、macOS 和命令行上，脚本在一个内嵌的 Rust 编译器里执行，由 Boa ECMAScript 引擎驱动。两套运行时都强制硬性执行超时和几何配额（对顶点、三角形、网格和程序化纹理设上限），因此失控的脚本无法冻住宿主应用。

快速的设备端编译到 GLB 与 USDZ：脚本构建几何体、基于物理的渲染（PBR）材质、程序化 canvas 纹理、层级组和关键帧动画时，Three-Live 把生成的场景图直接在内存里序列化成标准二进制 glTF 2.0（.glb）和未压缩的 Apple USDZ（.usdz）字节缓冲——通常耗时两到五毫秒。

针对平台优化的渲染：因为输出是标准二进制 3D 资产加上声明式动画绑定，每个平台都用自己的内建图形管线来渲染它：

Web（three-live 和 xr-live）：一个自研的零依赖 WebGL2 PBR 渲染器，以及一个 <three-live> Web Component——灵感来自 <model-viewer>——包含程序化的 Studio HDRI 反射、屏幕空间环境光遮蔽（SSAO）、泛光、阴影贴图，以及一键 AR 移交给 Android Scene Viewer、Apple AR Quick Look 或沉浸式 WebXR。发布时，带沙箱脚本和 AR 的标准包约 45 KB（gzip），xr-live 空间计算套件约 55 KB。

Android（com.google.threelive:compiler）：一个 Kotlin SDK 和多架构 JNI 库（arm64-v8a、armeabi-v7a、x86_64），在后台协程里把 three.js 字符串直接编译成 ByteBuffer 资产，供 Google Filament ModelViewer 和 Scene Viewer AR 使用。

iOS 与 macOS（ThreeLiveCompiler）：一个 Swift Package 和五切片 XCFramework，在设备上把 three.js 脚本编译给 RealityKit 的 ModelEntity 和 ARQuickLookPreviewController 使用。

XR-Live 空间计算 Playground 截图，展示六自由度（6DoF）空间特性、实时的程序化 three.js 源码编辑，以及空间 DOM UI 投影

用 HTML 声明式地做 3D 与空间 WebXR

在 Web 上，要加一个可交互、带内置轨道控制、支持手机 AR 的 AI 生成 3D 模型，只需要一个 HTML 自定义元素：

<script src="https://cdn.jsdelivr.net/npm/three-live@1.0.0/dist/three-live.min.js"></script>
<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);

    // Baked into a looping glTF animation (4 seconds by default).
    scene.userData.animate = (t) => {
      knot.rotation.y = t * (Math.PI / 2);
    };
  </script>
</three-live>

这段脚本在上面描述的沙箱里运行。因为内联脚本在客户端是可以被修改的，所以它们需要显式开启 allow-client-scripts；服务端生成的脚本可以用 script-src 加载。

只需要显示现成的模型？viewer-only 构建去掉了脚本编译器和 AR 移交，发布时约 23 KB（gzip）——相比完整的 three.js 库非常小。Three-Live 的 viewer 专注于快速加载的 PBR 显示、轨道控制和 glTF 动画：

<script src="https://cdn.jsdelivr.net/npm/three-live@1.0.0/dist/three-live-viewer.min.js"></script>
<three-live src="chair.glb" camera-controls auto-rotate></three-live>

对于空间计算头显和手机 AR 浏览器，配套的 xr-live 包增加了 <xr-live> 和 <xr-scene>，支持六自由度（6DoF）手势追踪（捏合、抓取、双手缩放）、空间 DOM 投影，以及在正在运行的 WebXR 会话中做实时的语音或文本转 3D 物体合成。

现在就试

我们做 Three-Live，是为了让 Web、移动端和 AI 开发者社区都能用上 3D 与空间计算，而不需要复杂的 3D 建模管线。你可以探索这个项目，并直接在浏览器里试用：

  • 交互式浏览器 playground：启动在线的 Three-Live Studio 和 XR-Live Playground，在浏览器里编辑程序化 three.js 代码并查看实时的 GLB 编译结果。
  • 源码与预编译产物：访问 google/three-live GitHub 仓库和 v1.0.0 GitHub Release，里面有预编译的 Linux、macOS 和 Windows 命令行二进制（three-live-cli）、Android .aar 归档和 Apple .xcframework 包。
  • 包管理器：从 npm 安装 three-live 和 xr-live，从 Crates.io 安装 three-live-compiler，或者在 Xcode 里通过 Swift Package Manager 添加 https://github.com/google/three-live.git。

Three-Live 目前处于 Developer Preview，我们欢迎开源开发者社区在 GitHub 上给出反馈、报 bug 和提 pull request。

Sources

同主题阅读

编译产物是标准 GLB，想先看一眼模型长什么样、尺度和朝向对不对，可以直接丢进在线 glTF / GLB 查看器。

本文属于「Web3D / 游戏引擎 / 元宇宙」专题。本文为原文完整翻译，未做本地复现；BimAnt 编译整理，转载请注明出处。