Three.js Plugin
You can use Sense of Space Streamable models in ThreeJS. The plugin consists of two objects
- Streamable model
- A single model being streamed
- Model streamer
- A module responsible for handling the streaming of the models
- The model streamer needs to be notified every frame
In the basic workflow you would start by creating a streamable model by calling createStreamableModel. This will automatically create a model streamer if it's not there yet.
After you've created at least one streamable model, you can get the model streamer by calling getModelStreamer.
The example below shows you step by step how to use the Three.js plugin.
To use the Sense of Space geometry streaming in Three.js, you need to include the following script tag in your html in addition to your ThreeJS:
Now, in your scripts you need to define the following model parameters (described in Supported Parameters) :
You can set only some parameters, or skip this part completely (then the streamer will use the default parameters - that are listed below).
Now you can add one or more streamable models to your scene by calling createStreamableModel with your Three.js renderer, scene, camera and optionally your own model parameters as parameters:
After this you need to get the modelStreamer object, which is automatically created when the first streamable model is created, and call its update function inside your render loop. E.g.
As can be seen in the example above you can set a number of parameters to the sosstreamablemodel component:
Name | Description | Default value |
path | The path to the streamable asset. | './model.sxrweb' |
useAlpha | Enable semi-transparent materials | false |
useMetalRoughness | Use PBR shading. Can be set to false if you want flat shading for e.g. photogrammetry models. | true |
occlusionCulling | Use occlusion culling. This will reduce the amount of rendered triangles and can speed up rendering significantly, but does not work well with shadows. | true |
equirecEnvMap | Path to an equirectangular environment map. Currently only the jpg format is supported. Can be left empty. | '' |
doubleSidedMaterials | Will switch on double sided surfaces in materials. | false |
quality | A number for adjusting the quality level (and bandwidth requirement). Can be any number, but should normally be between 0 and 3. Reference: - 0 = low quality - 1 = medium quality - 2 = high quality - < 0 = extremely low quality - > 2 extremely high quality. | 1.0 |
shadows | This needs to be set to true if you wish the streamable asset to cast and receive threejs shadows. | false |
You can also make easily a low-quality, static preview of a streamable model by calling createStreamableModelPreview. It takes two parameters:
- A similar model parameters object as is passed to createStreamableModel
- The target size of the preview model in kilobytes. The actual traffic may be different from the target value because the number of available LODs in the streamable model is limited.
The function will return a promise that will resolve to a THREE.Group object with a low-quality preview of the object.
Note that some of the model parameters are not applicable in the context of the preview. Most importantly the quality variable has no effect on the quality, but the preview quality is defined solely by the target size of the model.
