Skip to content
Render massive 3D models in real time with three.js
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples Example formatting Oct 7, 2019
img Add guide image Oct 14, 2019
src Fix material transparency cache bug Oct 14, 2019
.babelrc
.eslintrc.js Use Prettier in build Sep 3, 2019
.gitignore Initial commit Jun 25, 2019
.prettierrc Use Prettier in build Sep 3, 2019
LICENSE Initial commit Jun 25, 2019
package-lock.json Version 0.1.15 Oct 14, 2019
package.json Version 0.1.15 Oct 14, 2019
readme.md Update readme Oct 7, 2019
rollup.config.js Use Prettier in build Sep 3, 2019
tsconfig.json Port to TypeScript Sep 3, 2019

readme.md

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

Studio example PBR example Streaming position example

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

Getting StartedExample codeAPI 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.

You can’t perform that action at this time.