---
title: Mozilla Hubs
slug: mozilla-hubs
icon: 🦊
docTags: 
createdAt: 2022-04-11T15:38:36.000Z
---

::embed[]{url="https://youtu.be/QS8_WSxiOn8"}

Sense of Space Streaming technology can be integrated to Mozilla hubs. With our Mozilla Hubs component wrapper, you are 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. To see it in action, see [https://sensehubs.com](https://sensehubs.com)


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

### Limitations:

The Mozilla Hubs plugin package from [https://platform.senseofspace.io/](https://platform.senseofspace.io/) does not support model preview in Spoke. Our enterprise customers have an access to a version that has a preview of the models in Spoke too.

### Prerequisites:



- Custom Mozilla Hubs client (available in [https://github.com/mozilla/hubs](https://github.com/mozilla/hubs))
- Custom Mozilla Hubs Spoke (available in [https://github.com/mozilla/Spoke](https://github.com/mozilla/Spoke))
- Sense of Space - Mozilla Hubs plugin package from [https://platform.senseofspace.io/](https://platform.senseofspace.io/)

### Installation (Hubs)[](https://docs.senseofspace.io/mozilla-hubs#8d-installation)

- Copy the latest (0.0.11) version of the Sense of Space Streamable model
  AFrame component (e.g. **[https://assets.senseofspace.io/streamablemodel/0.0.11/sosStreamableModelAframe.js](https://assets.senseofspace.io/streamablemodel/0.0.11/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:

```javascript
import "./sosStreamableModelAframe";
```

- Add the following line to the file gltf-component-mappings.js in your Hubs source files (**Hubs/src/gltf-component-mappings.js**):

```javascript
AFRAME.GLTFModelPlus.registerComponent("sosstreamablemodel", "sosstreamablemodel");
```

### Installation (Spoke)

- Copy the files from the *Sense of Space - Mozilla Hubs plugin* package 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:

```javascript
import SosStreamableNode from "./editor/nodes/SosStreamableNode";
import SosStreamableNodeEditor from "./ui/properties/SosStreamableNodeEditor";
```

- Also, add the following line later in the code of **src/config.js**:

```javascript
editor.registerNode(SosStreamableNode, SosStreamableNodeEditor);
```

- Deploy your newly modified hubs and spoke versions and test.

Now you should see a new element type (Sense of Space Streamable Model) in the Elements menu below the viewport in Spoke.