Three.JS Integration

3min
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
// Creates as hologram object and returns it.
window.createHologram(
      hologram_url, // URL of the hologram file (.sxrweb)
      hologram_created_callback, // called when hologram is loaded to the point
                                 // that it can be shown, but not necessarily
                                 // played yet. Function with no arguments
      progress_callback, // This is called as loading progresses. Function
                         // with one number parameter, representing the
                         // progress of loading.
      Playable_callback,  // This is called when the hologram has been loaded
                          // enough that it can be played
      loop_mode, // sets the loop mode. Supported values:
                 //    0 or false = don’t loop
                 //    1 or true = ordinary loop
                 //    2 = ping-pong or boomerang mode. Only works for short
                 //        volumetric videos (300 frames or under).
      texture_url_override // Set this to the URL of the texture file you
                           // wish to use, if you want to override the texture
                           // defined in the hologram file. Can be useful if
                           // for some reason the texture files cannot be
                           // placed in the same directory as the sxrweb file
  	);
// Creates as hologram object and returns it.
window.createHologram(
      hologram_url, // URL of the hologram file (.sxrweb)
      hologram_created_callback, // called when hologram is loaded to the point
                                 // that it can be shown, but not necessarily
                                 // played yet. Function with no arguments
      progress_callback, // This is called as loading progresses. Function
                         // with one number parameter, representing the
                         // progress of loading.
      Playable_callback,  // This is called when the hologram has been loaded
                          // enough that it can be played
      loop_mode, // sets the loop mode. Supported values:
                 //    0 or false = don’t loop
                 //    1 or true = ordinary loop
                 //    2 = ping-pong or boomerang mode. Only works for short
                 //        volumetric videos (300 frames or under).
      texture_url_override // Set this to the URL of the texture file you
                           // wish to use, if you want to override the texture
                           // defined in the hologram file. Can be useful if
                           // for some reason the texture files cannot be
                           // placed in the same directory as the sxrweb file
  	);
﻿
﻿
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 25 Mar 2024
Did this page help you?
SXRWeb Standalone A-Frame Plugin
8th Wall Integration