Let's get started!
The web is a super cool way to share holographic experiences. To start off with we'll use this demo here which uses the Looking Glass WebXR library with vanilla (normal) javascript. No frameworks or anything like that required! For these demos, we're using codesandbox. A really neat code editor that lives entirely in your browser!
Before we dive into the code let's try getting this scene into our Looking Glass. Click the Enter VR button on the bottom of the web page, this should open up a pop up window. You'll want to move the pop up window over to your Looking Glass, and then double click anywhere in the window to have it go in full screen. It's important that the window is full screen as every pixel needs to be just right in order for it to work properly!
Pretty cool right? Let's go over the code.
Importing the Looking Glass WebXR library is super straightforward. The Looking Glass WebXR Library has two exports, the LookingGlassWebXRPolyfill and the LookingGlassConfig These are named exports so you'll need to import them as follows:
import { LookingGlassWebXRPolyfill, LookingGlassConfig } from @lookingglass/webxr
The LookingGlassWebXRPolyfill is what tells your browser what a Looking Glass is and how to render 3D content to it.
The LookingGlassConfig allows you to set some default options and control where your scene is on the Looking Glass.
These options are then editable by using the orbit controls feature to rotate around your scene, or by code if you want to change the camera settings live with javascript! For a full list of config options, check out our documentation site here.
Adding these to your code should be as simple as copy/pasting the following snippet. The snippet below includes the import statement as well as the declarations for the LookingGlassConfig and the LookingGlassWebXRPolyfill
import {LookingGlassWebXRPolyfill,LookingGlassConfig} from "@lookingglass/webxr";
const config = LookingGlassConfig;
config.tileHeight = 512;
config.numViews = 45;
config.targetY = 0;
config.targetZ = 0;
config.targetDiam = 3;
config.fovy = (14 * Math.PI) / 180;
new LookingGlassWebXRPolyfill();
Ok, so how do I add this to my own three.js project?
Great question! So if you're working with a node.js project, you'll need to install the Looking Glass WebXR Library from NPM, just like you would three.js or any other project. You can run the following command in your command prompt/terminal in your project directory.
npm install @lookingglass/webxr
This will install the Looking Glass WebXR library and will allow you to import it like we went over in the previous section.
You'll also need to set your Three.js project to have XR enabled. This will allow WebXR to work with your scene. If you've done this already skip ahead to step 3!
1. Setting the renderer to enable WebXR
Next, find your renderer, in the demo above that's declared on line 32.
You'll need to set XR to enabled, with the following code:
renderer.xr.enabled = true;
2. Adding the VRButton
To add the VRButton you'll need to import the VRButton from three.js:
import { VRButton } from "three/examples/jsm/webxr/VRButton.js";
and then declare it in your viewport, as follows:
document.body.append(VRButton.createButton(renderer));
The code here adds the VRButton to your web page, and passes a reference to three.js' renderer object. You'll need to put this line below where the renderer is defined.
Awesome, so now all that's left is to add in the Looking Glass Support!
3. Adding Looking Glass Support
Add the following lines to the top of your file, but below the other imports.
const config = LookingGlassConfig;
config.tileHeight = 512;
config.numViews = 45;
config.targetY = 0;
config.targetZ = 0;
config.targetDiam = 3;
config.fovy = (14 * Math.PI) / 180;
new LookingGlassWebXRPolyfill();
So a cube is cool and all, but what else can I make?
Three.js has a huge community of developers, and you can go even further with additional tools and components like react-three-fiber! Check out some scenes from some of our favorite creators in the web space! Including some work made in Spline! A web based 3D creation tool!
If you'd like to see some more cool demos or learn more about how the Looking Glass WebXR Library works check out our documentation site here!
