Example Web Player¶

You can download the latest Web Player Example project from the Resources and Downloads page.

The HoloSuite Web Player example project contains an .html page with a minimal Three.js scene playing HoloStream content. Refer to the Three.js (external link) and HoloSuite Player Web API documentation for details on individual functions and components.

Overview¶

The HoloSuite Web Player is configured to stream an example HoloStream clip to a simple scene containing an orbiting camera, depth fog, and shadows, in a player with support for seeking, play/pause, and audio controls.

Running the project¶

To run the example, simply extract and double click the ExamplePlayer.html file. This will launch the example page in your default browser. The HoloSuite Player will load and stream an example clip. You can use the playback controls to play, pause and seek through the active content.

Example code explained¶

This section will go over the example code used in ExamplePlayer.html.

Reviewing the project source¶

The Example Web Player is driven by css javascript code in the ExamplePlayer.html file. First, the .css styling specific to the demo page is imported, then the required files for playing HoloStreams are imported:

<link rel="stylesheet" type="text/css" href="https://static.holostream.arcturus.studio/release/4.0.0/HoloSuitePlayerWeb-4.0.0.css">
<script src="https://static.holostream.arcturus.studio/release/4.0.0/js/HoloSuitePlayerWeb-4.0.0.js"></script>

In the <body> section, the <script> tag contains the javascript code driving the Example Web Player.

onPageLoad()¶

The Example Web Player is initialized in function onPageLoad(). First, a HoloStream object is constructed. Then, the Three.js scene is configured in initializeScene(holoStream). Finally, the holoStream.OpenURL() function is called to load a HoloStream .mpd URL.

InitializeScene(holoStreamInstance)¶

InitializeScene() is called from onPageLoad(). This function sets up the basic Three.js viewer, containing the HoloStream player, a floor plane, basic lighting, and basic camera controls.

Controlling the scene¶

The holoStreamInstance exposes a Three.js Scene, Canvas, Renderer, And Camera. These Three.js objects are generated when the holoStream object is created, or existing objects can be supplied to the Constructor. You can edit the Three.js components like you would any other Three.js project.

Fill Color and Fog¶

            let fillColor = new THREE.Color("#aaa");
            threeObjects.threeScene.background = fillColor;
            threeObjects.threeScene.fog = new THREE.FogExp2(fillColor, 0.05);

The scene is configured with a solid background color and exponential fog.

Lighting¶

The next section of the example code controls the lighting in the scene.

var light = new THREE.DirectionalLight( 0xffffff, 0.4);
light.position.set( -10, 10, 15);
light.castShadow = true;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;

threeObjects.threeScene.add( light );

A THREE.Directionight is created with the specified color and density. Next we set the position of the light, and shadows are enabled and configured. Finally, the light is added to the scene. By default the HoloStream clip used in this example does not receive lighting or shadows, however this can be toggled using the Gear button in the UI.

Objects¶

var fillGeometry = new THREE.PlaneGeometry(100, 100, 32);
fillGeometry.translate(0, 0, 0);
fillGeometry.rotateX(-90 / 57.2958);
});

In our sample scene we are only creating one piece of static geometry: the floor plane so that we have something to cast shadows on.

We create this plane by declaring a Three.PlaneGeometry object. The parameters given are width, height, and optionally width segments and height segments. Then the position and rotation (in radians) are set.

var fillMaterial = new THREE.MeshPhongMaterial( {
                color: new THREE.Color("#444")
var fillPlane = new THREE.Mesh( fillGeometry, fillMaterial );
fillPlane.receiveShadow = true;
threeObjects.threeScene.add( fillPlane );

Next a phong material is created, configured, and assigned to the plane.

The plane is set to receive shadows, and added to the scene.

Controls¶

let controls = new THREE.OrbitControls( threeObjects.threeCamera, threeObjects.threeRenderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.09;
controls.enableKeys = true;
controls.autoRotate = false;
controls.autoRotateSpeed = 2.0;
controls.target = new THREE.Vector3(0, 1, 0);
controls.maxPolarAngle = Math.PI * .6;
controls.minPolarAngle = Math.PI * .25;
controls.update();

Our example uses Three.js OrbitControls.

Damping is enabled and configured, auto rotate is disabled, and a target and constraints are supplied.

Learning