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.
Click on any of the images above to see Umbra running in your browser.
Download the library from the
dist/ directory of this repository or
npm install @umbra3d/umbrajs-three. Then add it to your HTML:
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:
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.
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.