Three.js

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.



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.





As can be seen in the example above you can set a number of parameters to the sosstreamablemodel component: