Getting Started

cubesexample

This guide will go over how to install HoloPlay.js to show 3D content in a Looking Glass display. To use HoloPlay.js, make sure that HoloPlay Service is installed and up to date.

HoloPlay.js uses three.js to render 3D scenes. If you're not yet familiar with three.js, check out their getting started guide.

If running HoloPlay.js locally, your project must be run from a local web server.

First Time Usage

Never used HoloPlay.js or three.js? We recommend you download the HoloPlay.js library from our website. This bundle includes our example scenes as well as three.js. Try running some of the example scenes before creating your first app.

Running the Basic Example Scene

Connect your Looking Glass and open examples/basic/index.html in your browser to view the basic example scene. If everything is set up correctly, you should see three colored cubes on screen. Drag the window into the Looking Glass display, and click anywhere in the window to set it to fullscreen.

Once you've got the example running, try making some changes to examples/basic/index.html. See if you can move the cubes around or change their color. Remember to reload the page after saving your changes.

Next try some of the other examples, or start creating your own app from scratch.

Quick Install with npm

Already familiar with HoloPlay.js and three.js? Using npm, simply run npm install holoplay from your project directory in your terminal. This will download both HoloPlay.js and three.js to a folder called node_modules in your current directory. Then you can reference these scripts in your index.html:

<body>
  <script src="node_modules/three/build/three.js"></script>
  <script src="node_modules/holoplay/dist/holoplay.js"></script>
  <script>
    // Your JavaScript goes here.
  </script>
</body>

Or import HoloPlay.js with our JavaScript module (keep three.js in a global script tag):

<body>
  <script src="node_modules/three/build/three.js"></script>
  <script type="module">
    import * as HoloPlay from './node_modules/holoplay/dist/holoplay.module.js';
    // Your JavaScript goes here.
  </script>
</body>

Please note that the npm package does not contain any example scenes. To download the examples, follow the instructions for first time usage.

Creating Your First HoloPlay.js App

Once you've got HoloPlay.js and three.js in your project directory, create a basic index.html file, replacing the script file paths to match your folder structure:

<body>
  <script src="path/to/three.js"></script>
  <script src="path/to/holoplay.js"></script>
  <script>
    // Your JavaScript goes here.
  </script>
</body>

This minimal page will simply load three.js and HoloPlay.js. Now let's add some code to your <script> tag. First create an empty three.js scene to hold your 3D objects. Then construct a HoloPlay.Camera and a HoloPlay.Renderer to render the scene. Add the renderer's canvas (.domElement) to your page.

const scene = new THREE.Scene();
const camera = new HoloPlay.Camera();
const renderer = new HoloPlay.Renderer();
document.body.appendChild(renderer.domElement);

Add some 3D content to your scene. Let's create a sphere, as well as a few lights.

const sphere = new THREE.Mesh(
    new THREE.SphereBufferGeometry(0.02),
    new THREE.MeshLambertMaterial({color: 'green'}));
scene.add(sphere);

const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
directionalLight.position.set(0, 1, 2);
scene.add(directionalLight);

const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
scene.add(ambientLight);

Now that your scene is set up, let's render it. By using requestAnimationFrame we ensure that our scene gets rendered every frame.

function update(time) {
  requestAnimationFrame(update);
  renderer.render(scene, camera);
}
requestAnimationFrame(update);

Now refresh your page and you should see a sphere in your Looking Glass! Try adding more shapes in various positions and colors. Or try animating your sphere in the update function like this:

function update(time) {
  requestAnimationFrame(update);
  sphere.position.x = Math.sin(time / 1000) / 20;
  renderer.render(scene, camera);
}
requestAnimationFrame(update);

Here's what your final index.html should look like (with the paths to the scripts changed).

<body>
  <script src="path/to/three.js"></script>
  <script src="path/to/holoplay.js"></script>
  <script>
    const scene = new THREE.Scene();
    const camera = new HoloPlay.Camera();
    const renderer = new HoloPlay.Renderer();
    document.body.appendChild(renderer.domElement);

    const sphere = new THREE.Mesh(
        new THREE.SphereBufferGeometry(0.02),
        new THREE.MeshLambertMaterial({color: 'green'}));
    scene.add(sphere);

    const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
    directionalLight.position.set(0, 1, 2);
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
    scene.add(ambientLight);

    function update(time) {
      requestAnimationFrame(update);
      sphere.position.x = Math.sin(time / 1000) / 20;
      renderer.render(scene, camera);
    }
    requestAnimationFrame(update);
  </script>
</body>