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
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.
Importing Looking Glass WebXR
Looking Glass WebXR
Using NPM/Yarn
You can import the Looking Glass WebXR library by running the following command in your web project:
Or, if you use the yarn package manager:
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.
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:
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.
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.
React
Want to use Looking Glass WebXR with React? Check out our React-Three-Fiber documentation!
⚛️React-Three-FiberLast updated