3️⃣3️⃣ Three.JS

It's never been easier to integrate your Three.js scene with the Looking Glass!

Getting Started

Setting up your renderer

In Three.JS you need to declare that your scene is suitable for XR devices. To do this you'll need to add the following line after your renderer element is declared.

renderer.xr.enabled = true

Importing Looking Glass WebXR

Using NPM/Yarn

You can import the Looking Glass WebXR library by running the following command in your web project:

npm install @lookingglass/webxr

Or, if you use the yarn package manager:

yarn install @lookingglass/webxr

Once you've got it installed simply add the following code to your main JavaScript file. This will add in Looking Glass WebXR support and set up a few recommended defaults.

import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "@lookingglass/webxr"
const config = LookingGlassConfig
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (40 * Math.PI) / 180
new LookingGlassWebXRPolyfill()

Using a Script Tag

Script tags allow you to easily integrate Looking Glass WebXR without using tooling like npm or yarn.

You can also use a <script> tag, like shown in the following examples:

ES6 Script

<script type="module">
import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "https://unpkg.com/@lookingglass/webxr@0.6.0/dist/@lookingglass/webxr.js"
const config = LookingGlassConfig
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (40 * Math.PI) / 180
new LookingGlassWebXRPolyfill()
</script>

Live Examples

We've setup CodeSandbox demos for you here! You can try the Looking Glass WebXR Library right now by clicking the Enter Looking Glass Button on the demos below!

The Basics

Who doesn't love a rotating rectangular prism? This demo is just the basics, a rotating box with a simple color. This is a great way to understand how three.js works and change some basic settings.

A simple 'Hello World' demo using three.js and the Looking Glass WebXR library.

Loading a Model

Boxes are only so cool, check out this even cooler space helmet! This example uses Three.JS' environment and GLTF loaders. Try swapping the model out with your favorite model, or swapping the background out with a different HDR image from Polyhaven.

A Three.JS scene demonstrating how to load a GLTF model.

React

Want to use Looking Glass WebXR with React? Check out our React-Three-Fiber documentation!

⚛️React-Three-Fiber