⚛️React-Three-Fiber

Looking Glass WebXR brings Looking Glass support to React-Three-Fiber. Take advantage of this incredible ecosystem of components and build on the shoulders of giants with this powerful toolset.

Getting Started

Setting up your scene for WebXR

Setting up your scene for WebXR requires installing the @react-three/xr package. Once you've done this, you'll want to import the XR component and the XRButton component. Inside your Canvas, you'll need to wrap the scene with the <XR> component. Then add the <VRButton/> element to the stack inside your canvas component.

Importing Looking Glass WebXR

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.tileHeight = 512
config.numViews = 45
config.targetY = 0
config.targetZ = 0
config.targetDiam = 3
config.fovy = (40 * Math.PI) / 180
new LookingGlassWebXRPolyfill()

Live Examples

We've setup some codesandbox demos for you, you can try these out right now, directly in your browser!

The Basics - This example has the initial react-three-fiber starter project setup for you to use.

Fun with components - This example shows you how to leverage react-three-fiber's component-based architecture to create 3D scenes. Want to learn how to make a scene like this yourself? Check out Bruno Simon's ThreeJS Journey!

Moving the camera - This example shows you how to move the Looking Glass Camera around by modifying the config settings. Notice that the watch isn't the thing moving in this scene, but it's actually the camera rotating around it!