website logo
Contact Us
⌘K
🌐Sense of Space
Introduction
📶3D Streaming System
Introduction & Benefits
Client Implementations
Technical Limitations
Server Requirements
🧊3D Streaming Platform
Upload and Convert a 3D Model
How to Use the Conversion API
🧩Integrations Guides
🤖Unreal Engine
🕹️Unity Engine
🦊Mozilla Hubs
✴️PlayCanvas
🔺Three.js
🅰️A-Frame
🔶Babylon.js
🌍Embed to an HTML page
⚛️Extras
Volumetric Video Integrations
Docs powered by archbee 

Plugin Usage in HTML

3min

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>




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);




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);


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 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
Plugin Usage in Editor
NEXT
Supported Parameters
Docs powered by archbee