Three-Live：在Android和iOS上原生运行Three.js代码

免责声明：这不是 Google 官方支持的产品。 AI 优先的原生 3D 与 AR：设备端 JIT 编译器，将实时、AI 生成的 Three.js 编译为原生 Android Filament、iOS RealityKit 和 WebXR。 LLM 非常擅长生成 Three.js 代码。Three-Live 在设备端沙箱中编译这些代码，并在 Android 上通过 Google Filament 和 Scene Viewer、在 iOS 上通过 Apple RealityKit 和 Quick Look、在 Web 上通过 WebGL2 和 WebXR 进行原生渲染。 实时交互式演练场（无需构建）： 可在 iOS、Android 和头显上运行的交互式 AR 与 XR 实际上，浏览器 WebXR（navigator.xr）只覆盖了设备生态的一部分： Three-Live 通过在设备端编译同一份 Three.js 脚本，并在各平台自有引擎上原生运行来解决这个问题。下表展示了你在每种环境中能获得的能力： Three-Live 保持较小的 Web 体积，让你可以把 3D 或 XR 嵌入页面而无需加载无用代码。每个 bundle 和插件都同时支持预构建的 .glb、.usdz 和 .spz 资源，以及实时的 <script type="text/three"> 场景： 下表列出了 three-live-extras.min.js、three-live-animation.min.js 和 three-live-full.min.js 中包含的九个模块化 3D 与动画插件： 下表列出了 xr-live-plugins.min.js 中的七个感知、渲染和 AI 插件： 下表列出了 xr-live-plugins.min.js 中的七个 CAD、布局、移动和多用户插件： 下表列出了 xr-live-sim.min.js 中的五个仿真插件（详见 Simulation plugins）： 由于 LLM 已经了解 Three.js，智能体或后端可以用 15 到 30 行 JavaScript 生成完整的交互式 3D 或 XR 场景，无需外部二进制资源。Three-Live 在 Web 上于专用 Web Worker 或 opaque-origin 的 <iframe sandbox="allow-scripts">（connect-src 'none'）中执行客户端脚本，在 Android 和 iOS 上于沙箱化的 Rust Boa VM 中执行——移除了网络和存储全局对象、冻结了 Object.prototype、设置了 CPU 指令燃料限制和场景几何内存配额。 下表对比了 <three-live> 与 <xr-live>： 使用 <three-live> 渲染程序化 3D 场景

<script type="module" src="/dist/three-live.min.js"></script> <three-live allow-client-scripts camera-controls ar auto-rotate style="width: 100%; height: 480px; display: block;"> <script type="text/three"> const mesh = new THREE.Mesh( new THREE.TorusKnotGeometry(0.4, 0.14, 64, 16), new THREE.MeshStandardMaterial({ color: 0x4285f4, metalness: 0.6, roughness: 0.2 }) ); scene.add(mesh); </script> </three-live> 使用 <xr-live> 构建空间场景 <script type="module" src="/dist/xr-live-full.min.js"></script> <xr-live allow-client-scripts xr-mode="inline-ar" xr-depth="occlusion-physics" xr-hands="gestures" world-understanding="planes reticle" spatial-paint="#38bdf8" camera-controls style="width: 100%; height: 560px; display: block;"> <xr-anchor name="chair" src="/models/chair.glb" position="0 0 -1.2" data-xr-traits="grab scale anchor"></xr-anchor> <div slot="spatial" data-position="0.45 0.9 -1.1" data-xr-traits="grab billboard"> <div style="padding: 14px; background: #0f172a; color: #fff; border-radius: 12px;"> <h4>Spatial product card</h4> <button>Pinch to interact</button> </div> </div> </xr-live> 为高级功能注册可选插件 如果你使用打包工具，并且只需要在 < 66 KB gz 的 <xr-live> 核心之上添加特定的空间插件，只需导入并注册这些插件即可： import { XRLiveElement } from 'three-live/xr-live'; import { spatialMeasurePlugin } from 'xr-live/src/plugins/spatial-measure'; import { magneticSnapPlugin } from 'xr-live/src/plugins/magnetic-snap'; XRLiveElement.registerPlugin(spatialMeasurePlugin); XRLiveElement.registerPlugin(magneticSnapPlugin); 在 Android 上通过 Google Filament 和 Jetpack XR SceneCore 原生运行 import com.google.threelive.FilamentHelper import com.google.threelive.XRLiveRuntimeSession import com.google.threelive.XRLiveSceneCoreHelper // Compile a Three.js script to a zero-copy GLB buffer and render in Google Filament val holder = FilamentHelper.loadModelZeroCopy(script) { buffer -> assetLoader.createAssetFromBinary(buffer) // Drive live KHR_interactivity graphs, head-follow springs, orbits, and spatial features on each frame val runtime = XRLiveRuntimeSession.fromGlb(holder.byteBuffer) runtime.step(dtSeconds = 1.0 / 60.0) // Or hydrate interactive spatial traits (grab, scale, billboard, anchor) in Android XR SceneCore XRLiveSceneCoreHelper.attachTraitsFromGlb(xrSession, entity, holder.byteBuffer) 在 iOS 和 visionOS 上通过 Apple RealityKit 原生运行 import ThreeLiveCompiler import RealityKit func loadSpatialScene(from script: String, into arView: ARView) async throws -> XRLiveRealityKitSession? { let glb = try ThreeCompiler.compileToGLB(script: script) let entity = try await RealityKitHelper.loadEntity(fromGLB: glb) XRLiveRealityKit.installTraits(on: entity, in: arView) // Bind live KHR_interactivity and spatial traits to RealityKit SceneEvents.Update let session = XRLiveRealityKitSession(glbData: glb, root: entity) session?.installInputTargets() session?.start() return session 从命令行编译场景（three-live-cli） $ three-live-cli convert scene.js -o output.glb 项目状态 Three-Live 处于 Developer Preview（Alpha）阶段。它是一个实验性开源库，探索跨 Web、Android 和 Apple 平台的 AI 驱动程序化 3D 与空间计算。 包安装 Web（CDN、预构建发布版或源码）： <script type="module" src="https://google.github.io/three-live/dist/three-live.min.js"></script> 预构建 bundle 归档：从 GitHub Releases 下载 three-live-web-dist.zip。 从源码：运行 git clone https://github.com/google/three-live.git && cd three-live && npm install && npm run build。 iOS、macOS 和 visionOS（Swift Package Manager）： .package(url: "https://github.com/google/three-live.git", from: "1.0.0")

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）