Introducing Three-Live: turning AI-generated Three.js into interactive 3D, AR, and WebXR across web and mobile

by Jonathan Bingham, AI Foundations

Want to add AI-generated 3D or XR to your web or mobile app? Unsure how to get started? That’s why we created the open source cross-platform project Three-Live—written entirely by Google Antigravity, in partnership with one former software engineer turned product manager. (Three-Live is not an officially supported Google product.)

You can think of Three-Live as a simple, unofficial companion to the more capable and feature-rich XR Blocks, Android XR’s web-based cross-platform framework for XR. The goal of Three-Live is to make it easy to get started with 3D and XR that’s AI-authored in Three.js. Three-Live combines the familiar developer experience of <model-viewer> and native mobile libraries with a sandboxed compiler for on-device or server-side compilation of untrusted LLM-generated JavaScript. Large language models (LLMs) have gotten remarkably good at writing software, and that includes generating 3D code in procedural Three.js JavaScript that describes objects, materials, lighting, and animations. But runtime AI-generated code is not trusted, and requires security sandboxing for safe execution. Also, mobile devices provide native support for 3D and XR rendering, and forcing them to run a webview limits the performance.

Today, we are excited to release Three-Live (v1.0.0, Developer Preview) under the Apache 2.0 license. It’s a lightweight, cross-platform open source library and on-device compiler that bridges the gap between AI-generated Three.js code and high-performance 3D, AR, and WebXR rendering across web, Android, and iOS.

How Three-Live works

Rather than use Three.js as a browser-only rendering loop, Three-Live treats a declarative subset of the Three.js API as a universal, portable scene description language:

Sandboxed execution with strict resource quotas: On the web, untrusted scripts execute inside an isolated Web Worker (with an optional opaque-origin sandboxed <iframe> tier) where network primitives (fetch, XMLHttpRequest, WebSocket, dynamic import()) are stripped before a single line of user code runs. On Android, iOS, macOS, and the command line, scripts execute inside an embedded Rust compiler powered by the Boa ECMAScript engine. Both runtimes enforce hard execution timeouts and geometry quotas (capping vertices, triangles, meshes, and procedural textures) so runaway scripts cannot freeze the host application.

Fast on-device compilation to GLB and USDZ: As the script constructs geometries, physically based rendering (PBR) materials, procedural canvas textures, hierarchy groups, and keyframe animations, Three-Live serializes the resulting scene graph directly into standard binary glTF 2.0 (.glb) and uncompressed Apple USDZ (.usdz) byte buffers in memory—typically in two to five milliseconds.

Platform-optimized rendering: Because the output is a standard binary 3D asset coupled with declarative animation bindings, each platform renders it using its built-in graphics pipeline:

• Web (three-live and xr-live): A custom zero-dependency WebGL2 PBR renderer and <three-live> web component—inspired by <model-viewer>—complete with procedural Studio HDRI reflections, screen-space ambient occlusion (SSAO), bloom, shadow mapping, and a single-click AR handoff to Android Scene Viewer, Apple AR Quick Look, or immersive WebXR. At launch, the standard bundle with sandboxed scripting and AR is about 45 KB gzipped, and the xr-live spatial computing suite is about 55 KB.
• Android (com.google.threelive:compiler): A Kotlin SDK and multi-architecture JNI library (arm64-v8a, armeabi-v7a, x86_64) that compiles Three.js strings on a background coroutine straight into ByteBuffer assets for Google Filament ModelViewer and Scene Viewer AR.
• iOS and macOS (ThreeLiveCompiler): A Swift Package and five-slice XCFramework that compiles Three.js scripts on-device for RealityKit ModelEntity and ARQuickLookPreviewController.

Declarative 3D and spatial WebXR in HTML

On the web, adding an interactive, AI-generated 3D model with built-in orbit controls and mobile AR support requires just a single HTML custom element:

<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>

The script runs in the sandbox described above. Because inline scripts are client-modifiable, they require the explicit allow-client-scripts opt-in; server-generated scripts can be loaded with script-src instead.

Only need to display existing models? The viewer-only build drops the script compiler and AR handoff and weighs about 23 KB gzipped at launch—tiny compared to the full Three.js library. The Three-Live viewer focuses on fast-loading PBR display, orbit controls, and glTF animation:

<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>

For spatial computing headsets and mobile AR browsers, the companion xr-live package adds <xr-live> and <xr-scene>, enabling six-degrees-of-freedom (6DoF) hand-tracking gestures (pinch, grab, two-hand scale), spatial DOM projection, and real-time voice- or text-to-3D object synthesis inside an active WebXR session.

Try it today

We built Three-Live to make 3D and spatial computing accessible to web, mobile, and AI developer communities without requiring complex 3D modeling pipelines. You can explore the project and try it right in your browser:

• Interactive browser playgrounds: Launch the live Three-Live Studio and XR-Live Playgrounds to edit procedural Three.js code and inspect real-time GLB compilation in your browser.
• Source code and prebuilt binaries: Visit the google/three-live GitHub repository and the v1.0.0 GitHub Release for prebuilt Linux, macOS, and Windows CLI binaries (three-live-cli), Android .aar archives, and Apple .xcframework bundles.
• Package managers: Install three-live and xr-live from npm, three-live-compiler from Crates.io, or add https://github.com/google/three-live.git in Xcode via Swift Package Manager.

Three-Live is currently in Developer Preview, and we welcome feedback, bug reports, and pull requests from open source developer communities on GitHub.