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:



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.