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 
3min

Three.JS Integration

Sxrweb three.js player documentation



Component: soshologram_threejs.js

Available in https://assets.senseofspace.io/jsplugins/1.0.12/soshologram_threejs.js

Purpose: playing volumetric video in the Sense Of Space sxrweb format.

Prerequisites: Three.js, soshologram.js, hologram data .sxrweb (+ mp4)

Basic architecture:

When soshologram.js code is run, a function named createHologram() is added to window. This way, you can import soshologram.js as a module or simply add a script tag to it to have access to it. Calling window.createHologram will return a hologram object that can easily be integrated into any three.js application, including but not limited to AFrame.

createHologram() interface:

JS
|




Hologram object interface:

SxrHologram.playHologram(userInteraction) Tries to play the hologram if there is sufficient data to play it. The argument can be used to indicate if the playing was caused by a user interaction or by automation. Affects muting of the video audio.

SxrHologram.pauseHologram() Pauses the hologram playback

SxrHologram.getMesh() Returns a Three.js mesh, that can be added to the scene.

SxrHologram.updateHologram() Updates the hologram geometry and texture. By default this should be called every frame, or whenever you wish to update the hologram.

SxrHologram.setQuality(quality) Sets the quality level of the hologram. Supported input values 0=low quality, 1=medium quality, 2= high quality.

SxrHologram.setHologramTime(time) Sets the hologram time value in seconds. May not work expectedly when streaming the data. Geometry and video is streamed by default if the backend server supports ranges. If you wish to preload everything before playing use blob URLs.

SxrHologram.getVideoElement() Returns the video element which feeds the texture data to the hologram.

SxrHologram.disposeData() Call this if you get rid of a hologram in the middle of running your program. Frees resources.



Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
8th Wall Integration
Docs powered by archbee 
TABLE OF CONTENTS
Sxrweb three.js player documentation
Basic architecture:
createHologram() interface:
Hologram object interface: