In this section, we’ll highlight the main differences between a normal three.js scene and a scene that uses HoloPlay.js.

Basic

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

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 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

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;
  });