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
Basic functionality Walkthrough Live Example
Using the Looking Glass buttons Walkthrough Live Example
Some available debugging options Walkthrough Live Example
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
cubes example
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:
1
import * as HoloPlay from '../../dist/holoplay.module.js';
Copied!
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:
1
const camera = new HoloPlay.Camera();
2
const renderer = new HoloPlay.Renderer();
Copied!
Then, the canvas is added and the scene is rendered, like normal:
1
document.body.appendChild(renderer.domElement);
2
3
function update(time) {
4
requestAnimationFrame(update);
5
6
renderer.render(scene, camera);
7
}
8
requestAnimationFrame(update);
Copied!

Buttons

See live example here
buttons example
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:
1
const buttons = new HoloPlay.Buttons();
Copied!
Then we add a listener for when the buttons are pressed.
1
buttons.addEventListener('buttonPressed', (e) => {
2
switch (e.detail.name) {
Copied!
When the left button is pressed, the camera rotates left on y axis:
1
case 'left':
2
camera.rotation.y -= 0.002;
3
break;
Copied!
When the right button is pressed, the camera rotates right on y axis:
1
case 'right':
2
camera.rotation.y += 0.002;
3
break;
Copied!
When the square button is pressed, the camera moves left on the z axis:
1
case 'square':
2
if (camera.position.z > 0.2) {
3
camera.position.z -= 0.01;
4
}
5
break;
Copied!
When the circle button is pressed, the camera moves right on the z axis:
1
case 'circle':
2
if (camera.position.z < 100) {
3
camera.position.z += 0.01;
4
}
5
break;
Copied!

Debugging

See live example here
{: style="width:300px"}
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.
1
const renderer = new HoloPlay.Renderer({
2
disableFullscreenUi: true,
3
});
Copied!
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.
1
const buttonContainer = document.createElement('div');
2
buttonContainer.style.cssText = `
3
position: absolute;
4
z-index: 99;
5
`;
6
document.body.appendChild(buttonContainer)
Copied!
The first button switches the scene into a 3D view, and disables 2D and quilt mode:
1
const button3d = document.createElement('button');
2
button3d.textContent = '3d';
3
button3d.style.cssText = `
4
font-size: 6em;
5
font-weight: bold;
6
margin: 8px;
7
`;
8
buttonContainer.appendChild(button3d);
9
button3d.addEventListener('click', () => {
10
// disable both debug options
11
renderer.render2d = false;
12
renderer.renderQuilt = false;
13
});
Copied!
The second button switches the scene into 2D mode, with quilt view disabled:
1
const button2d = document.createElement('button');
2
button2d.textContent = '2d';
3
button2d.style.cssText = `
4
font-size: 6em;
5
font-weight: bold;
6
margin: 8px;
7
`;
8
buttonContainer.appendChild(button2d);
9
button2d.addEventListener('click', () => {
10
// enable 2d mode
11
renderer.render2d = true;
12
renderer.renderQuilt = false;
13
});
Copied!
The third button switches the scene to quilt mode, disabling 2D mode:
1
const buttonQuilt = document.createElement('button');
2
buttonQuilt.textContent = 'quilt';
3
buttonQuilt.style.cssText = `
4
font-size: 6em;
5
font-weight: bold;
6
margin: 8px;
7
`;
8
buttonContainer.appendChild(buttonQuilt);
9
buttonQuilt.addEventListener('click', () => {
10
renderer.render2d = false;
11
// enable quilt mode
12
renderer.renderQuilt = true;
13
});
Copied!

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.
Last modified 4mo ago