Umbra support for three.js

Render massive 3D models in real time with three.js

This is an extension to three.js that allows you to stream in and render large models using Umbra's cloud service.

Live Demos

Click on any of the images above to see Umbra running in your browser.

Getting Started — Example code — API reference

Usage

Download the library from the dist/ directory of this repository or npm install @umbra3d/umbrajs-three. Then add it to your HTML:

<script src="umbrajs-three.js"></script>

If you used npm install you can find the file in node_modules/@umbra3d/umbrajs-three/dist/umbrajs-three.js. You need also umbra.wasm, see Webpack build for more.

First create a three.js renderer and then initialize Umbra and and pass in a three.js renderer as an argument:

let Umbra = await UmbraRuntime.initWithThreeJS(renderer)
let umbraScene = Umbra.createScene(
  'key=pubk-6f592e67-5aec-479a-ad9e-46ad4e4fe699&project=745415655&model=745415871',
)

The string argument identifies the optimized 3D scene to be streamed from Umbra's cloud.

You can then create a three.js scene and add our umbraScene to it:

var scene = new THREE.Scene()
scene.add(umbraScene)

Finally, inside your animation loop you must update the runtime:

Umbra.update()

This call incrementally downloads and unpacks meshes, and it must be called every frame.

Running examples locally

Download this repository and run npx http-server. Then open the player example. You should see a red shoe.

See the build instructions for local builds.

Uploading scenes

You need a free trial account to upload scenes to Umbra's cloud. Please fill a request access form at https://www.umbra3d.com/access-request to start your trial.