Skip to main content

Getting Started

XR Blocks is a lightweight, cross-platform library for rapidly prototyping advanced XR and AI experiences. Built upon three.js, it targets Chrome v136+ with WebXR support on Android XR. XR Blocks supports XR and desktop platforms, emphasizing a user-centric, developer-friendly SDK.

Importing XR Blocks​

For a starter template, take a look at templates/0_basic/index.html.

XR Blocks can be imported directly into a webpage using a importmap or a bundler.

To use an importmap, simply add the following importmap to your index.html page.

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.181.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.181.0/examples/jsm/",
      "xrblocks": "https://cdn.jsdelivr.net/gh/google/xrblocks@build/xrblocks.js",
      "xrblocks/addons/": "https://cdn.jsdelivr.net/gh/google/xrblocks@build/addons/"
    }
  }
</script>
tip

Using xrblocks@build loads the latest development version of XR Blocks every time your web app loads. To pin a build of XR Blocks, replace build with an SHA from the build branch or load a version from the xrblocks npm package using a URL such as https://cdn.jsdelivr.net/npm/xrblocks@0.1.0/build/xrblocks.js.

Checking versions...

Upon importing, XR Blocks automatically creates an Core singleton which will initialize a basic renderer and manage the lifecycle of the app.

Setting up the scene.​

Create a JS module which imports the XR Blocks to access the scene:

import * as xb from 'xrblocks';

// Initialize the XR Core object to create a renderer and scene.
xb.init();

// Now we can access the scene from `xb.scene`;
// This is a standard THREE.Scene object.
xb.scene;