Skip to content

Examples

The following examples are available in the HoloPlay.js download bundle, in the holoplayjs/examples directory. Live examples of the code are hosted online and are linked to in the table below.

Description
debugging Basic functionality
Walkthrough
Live Example
debugging Using the Looking Glass buttons
Walkthrough
Live Example
debugging Some available debugging options
Walkthrough
Live Example
debugging Loading a glTF model
Walkthrough
Live Example

We’ll highlight the main differences between a normal three.js scene and a scene that uses HoloPlay.js by walking through the scripts in the examples of the HoloPlay.js library.

Basic

See live example here

cubesexample

Open up the basic example’s index.html file. After the standard set up for a three.js scene, the first important line to note is:

import * as HoloPlay from '../../dist/holoplay.module.js';

Which references the HoloPlay.js library so that it can be used in the script.

After adding some basic three.js lighting and cube meshes, the HoloPlay camera and HoloPlay renderer are added:

const camera = new HoloPlay.Camera();
const renderer = new HoloPlay.Renderer();

Then, the canvas is added and the scene is rendered, like normal:

document.body.appendChild(renderer.domElement);

function update(time) {
  requestAnimationFrame(update);

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

Buttons

See live example here

buttonsexample

The example Buttons scripts creates the same scene as the Basic, except that it moves the HoloPlay camera position or rotation in a direction based on the Looking Glass button that is being pressed. This is to demonstrate how to make use of the buttons on the front of the Looking Glass.

There are three button events: buttonDown, buttonPressed, and buttonUp.

buttonDown fires once on the first frame a button is pressed

buttonPressed fires each frame a button is held

buttonUp fires once on the first frame after a button is released

Each button event indicates the name of the button the event occured for. The names of the buttons are: square, left, right, circle

First we will create a reference for Looking Glass buttons we want to emit events for:

const buttons = new HoloPlay.Buttons();

Then we add a listener for when the buttons are pressed.

buttons.addEventListener('buttonPressed', (e) => {
  switch (e.detail.name) {

When the left button is pressed, the camera rotates left on y axis:

case 'left':
  camera.rotation.y -= 0.002;
  break;

When the right button is pressed, the camera rotates right on y axis:

case 'right':
  camera.rotation.y += 0.002;
  break;

When the square button is pressed, the camera moves left on the z axis:

case 'square':
  if (camera.position.z > 0.2) {
    camera.position.z -= 0.01;
  }
  break;

When the circle button is pressed, the camera moves right on the z axis:

case 'circle':
  if (camera.position.z < 100) {
    camera.position.z += 0.01;
  }
  break;

Debugging

See live example here

debugging

Here we will go over some ways you can debug your project using some tools from our library. When creating a three.js scene on your Looking Glass, it can be important to switch from 3D to 2D to quilt view depending on what you’re trying to achieve with your project and to help debug rendering issues.

When we construct our HoloPlay.Renderer, we’ll disable full screen UI so that we can use the debug options.

const renderer = new HoloPlay.Renderer({
  disableFullscreenUi: true,
});

Next we’ll make buttons to switch from viewing the scene in 3D to 2D to the quilt view, and add them to the canvas.

const buttonContainer = document.createElement('div');
buttonContainer.style.cssText = `
  position: absolute;
  z-index: 99;
`;
document.body.appendChild(buttonContainer)

The first button switches the scene into a 3D view, and disables 2D and quilt mode:

const button3d = document.createElement('button');
button3d.textContent = '3d';
button3d.style.cssText = `
  font-size: 6em;
  font-weight: bold;
  margin: 8px;
`;
buttonContainer.appendChild(button3d);
button3d.addEventListener('click', () => {
  // disable both debug options
  renderer.render2d = false;
  renderer.renderQuilt = false;
});

The second button switches the scene into 2D mode, with quilt view disabled:

const button2d = document.createElement('button');
button2d.textContent = '2d';
button2d.style.cssText = `
  font-size: 6em;
  font-weight: bold;
  margin: 8px;
`;
buttonContainer.appendChild(button2d);
button2d.addEventListener('click', () => {
  // enable 2d mode
  renderer.render2d = true;
  renderer.renderQuilt = false;
});

The third button switches the scene to quilt mode, disabling 2D mode:

const buttonQuilt = document.createElement('button');
  buttonQuilt.textContent = 'quilt';
  buttonQuilt.style.cssText = `
    font-size: 6em;
    font-weight: bold;
    margin: 8px;
  `;
  buttonContainer.appendChild(buttonQuilt);
  buttonQuilt.addEventListener('click', () => {
    renderer.render2d = false;
    // enable quilt mode
    renderer.renderQuilt = true;
  });

Load gLTF Model

See live example here

cubesexample

Take a look at the source code of "Loading a gLTF Model" to learn how to load a gLTF model in your three.js Looking Glass project.