Usage

3min
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:
HTML
<script src="https://assets.senseofspace.io/streamablemodel/0.0.10/sosStreamableModelThree.js"></script>
<script src="https://assets.senseofspace.io/streamablemodel/0.0.10/sosStreamableModelThree.js"></script>
﻿
﻿
Now, in your scripts you need to define the following model parameters (described in Supported Parameters):
JS
let modelParams = {
"path" : './model.sxrweb',
"useAlpha" : true,
"useMetalRoughness": true,
"occlusionCulling": true,
"equirecEnvMap":'env.jpg',
"doubleSidedMaterials": false,
"quality": 1.0,
"shadows": false
};
let modelParams = {
"path" : './model.sxrweb',
"useAlpha" : true,
"useMetalRoughness": true,
"occlusionCulling": true,
"equirecEnvMap":'env.jpg',
"doubleSidedMaterials": false,
"quality": 1.0,
"shadows": false
};
﻿

You can set only some parameters, or skip this part completely (then the streamer will use the default parameters - that are listed in Supported Parameters).
﻿
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:
JS
let object3d = createStreamableModel(renderer, scene, camera, modelParams);
let object3d = createStreamableModel(renderer, scene, camera, modelParams);
﻿

﻿
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.
JS
let modelStreamer = getModelStreamer();
render = function () {
    requestAnimationFrame( render );
    if(modelStreamer !== undefined) {
        modelStreamer.updateFrame();
    }
    // Render the scene
    renderer.render(scene, camera);
};
render();
let modelStreamer = getModelStreamer();
render = function () {
    requestAnimationFrame( render );
    if(modelStreamer !== undefined) {
        modelStreamer.updateFrame();
    }
    // Render the scene
    renderer.render(scene, camera);
};
render();
﻿

﻿
﻿
﻿
Updated 25 Mar 2024
Did this page help you?
Three.js
Making a low-quality preview
Usage

﻿
