Plugin Usage in HTML

2min
If you are using use the Sense of Space geometry streaming in PlayCanvas without the Playcanvas editor, directly in an HTLM page, you will need to include the following script tag in your html:

JS

<script·src="https://assets.senseofspace.io/streamablemodel/0.0.11/sosStreamableModelPlaycanvasScript.js"></script>
<script·src="https://assets.senseofspace.io/streamablemodel/0.0.11/sosStreamableModelPlaycanvasScript.js"></script>
﻿
﻿
The script in PlayCanvas should be added to your HTML file after initializing of pc.Application, but before you attach the script component to the Entity and run Application.start()
After then you need to define a new Entity, add it the root and define the parameters (described in Supported Parameters):
JS
let streamController = new pc.Entity();
streamController.addComponent("script");
streamController.script.create("sosStreamController" , {
	attributes: {
		quality: 1.0,
		camera : camera
	}
});
	
let element1 = new pc.Entity();
element1.addComponent("script");
element1.script.create("sosStreamableModel" , {
	attributes: {
		path: "./model.sxrweb",
		useAlpha : true,
		useMetalRoughness: true,
		castShadows : true,
        		castLightmapShadows : true,
        		receiveShadows : true
	}
});

element1.setPosition(0, 0, 0);
streamController.addChild(element1);

app.root.addChild(streamController);
let streamController = new pc.Entity();
streamController.addComponent("script");
streamController.script.create("sosStreamController" , {
	attributes: {
		quality: 1.0,
		camera : camera
	}
});
	
let element1 = new pc.Entity();
element1.addComponent("script");
element1.script.create("sosStreamableModel" , {
	attributes: {
		path: "./model.sxrweb",
		useAlpha : true,
		useMetalRoughness: true,
		castShadows : true,
        		castLightmapShadows : true,
        		receiveShadows : true
	}
});

element1.setPosition(0, 0, 0);
streamController.addChild(element1);

app.root.addChild(streamController);
﻿
﻿
If you want to have several streamable models in one project, you need to specify all of them as it is done above and add all Streamable Models as a child to Stream Controller:
JS
let element2 = new pc.Entity();
element2.addComponent("script");
element2.script.create("sosStreamableModel" , {
	attributes: {
		path: "./model.sxrweb",
		useAlpha : true,
		useMetalRoughness: true,
		castShadows : true,
        		castLightmapShadows : true,
        		receiveShadows : true
	}
});

element2.setPosition(10, 0, 0);
streamController.addChild(element2);
let element2 = new pc.Entity();
element2.addComponent("script");
element2.script.create("sosStreamableModel" , {
	attributes: {
		path: "./model.sxrweb",
		useAlpha : true,
		useMetalRoughness: true,
		castShadows : true,
        		castLightmapShadows : true,
        		receiveShadows : true
	}
});

element2.setPosition(10, 0, 0);
streamController.addChild(element2);
﻿

You can list only necessary parameters, or skip this part altogether (and use the default parameters listed in Supported Parameters). 
Note! However, you need to set at least the camera and the path to the model!
Once your scene is played, your model will start streaming right away.
Updated 25 Mar 2024
Did this page help you?
Plugin Usage in Editor
Supported Parameters