9min

Mozilla Hubs

With our Mozilla Hubs component wrapper, you're able to stream large models inside any Mozilla Hubs based applications or projects, being able to showcase and stream large 3D models in both web-desktop and VR.

The wrapper is based on the tutorial here: https://github.com/mozilla/Spoke/blob/master/docs/creating-custom-elements.md

Prerequisites:

- Custom Mozilla Hubs client (available in https://github.com/mozilla/hubs) - Custom Mozilla Hubs Spoke (available in https://github.com/mozilla/Spoke)

Installation

  • Copy the latest (minimum 0.0.9) version of the Sense of Space Streamable model AFrame component (e.g. https://assets.senseofspace.io/streamablemodel/0.0.10/sosStreamableModelAframe.js) to your Hubs components folder (e.g. c:/dev/hubs/hubs/src/components/sosStreamableModelAframe.js)
  • Add the following line to scene-components.js in the same folder:
JS
|
  • Add the following line to the file gltf-component-mappings.js in your Hubs source files (Hubs/src/gltf-component-mappings.js):
JS
|
  • Copy the files from the Plugin folder in the Spoke directory to the corresponding subdirectory of your own custom Spoke.
  • Add the following lines to imports of src/config.js in your custom Spoke repository:
JS
|
  • Also, add the following line later in the code of src/config.js:
JS
|
  • Deploy your newly modified hubs and spoke versions and test. You should see a new element type (Sense of Space Streamable Model) in the Elements menu below the viewport in Spoke. The model is represented by a cube placeholder in the editor but when viewed in Hubs, the actual model is streamed.



Updated 11 May 2022
Did this page help?
Yes
No