React AR Components

React components for Augmented Reality on the web.

Components

• ModelViewer: used to interact with a 3D model on the browser (desktop)
• WebXROverlay: DOM overlay used during a WebXR session (Chrome browser on mobile)

Methods

• activateAR: tries to open a GLB model on SceneViewer or a USDZ model on quicklook
• activateWebXR: tries to open a GLB model using WebXR, having activateAR as a fallback

ModelViewer

Attention: This component needs the importing of @google/model-viewer. We suggest it by adding the script to the page HTML, but it's also possible to add via NPM. Please refer to the model-viewer documentation

| param | description | default | | ----------------------------- | -------------------------------------------------------------------------- | ----------------- | | model-viewer default params | Please refer to model-viewer documentation | '' | | ref* | React RefObject to get/set properties of ModelViewer | undefined | | className | React ClassName, same as HTML class | undefined | | style | object containing custom CSS classes to customize this component | undefined | | children | React component to nest inside model-viewer | undefined | | componentDidMount | function to handle mount event | () => undefined | | onClick | function to handle click event | () => undefined | | pan | determines if the model will have pan interaction | true |

*: Prop required to make this wrapper work. Can be passed as follows:

<ModelViewer ref={React.createRef()} {...props} />

activateAR

| param | description | type | default | App | | ------------------ | -------------------------------------------- | ------------------------ | ----------------- | ----------- | | glb | url of the GLB file for Android devices | string | '' | SceneViewer | | usdz | url of the USDZ file for iOS devices | string | '' | QuickLook | | title | Display title of object on model card | string | undefined | SceneViewer | | shareText | String to display when sharing AR experience | string | undefined | Both | | sound | URL to play as sound when model is placed | string | undefined | SceneViewer | | link | Link to show on model card | string | undefined | SceneViewer | | scale | determines if model allows rescale | 'fixed' \| 'resizable' | 'fixed' | Both | | placement | determines the plane to render the model | 'floor' \| 'wall' | floor | SceneViewer | | disableOcclusion | SceneViewer object blending disabling | boolean | false | SceneViewer | | hashFallback | New window.location.hash when AR cannot load | string | #no-ar-fallback | SceneViewer |

activateWebXR

| param | description | type | default | | ------------------ | -------------------------------------------- | ------------------------ | ----------------- | | model.glb | Url of the model's GLB file | string | undefined | | model.name | Display title of object on model card | string | undefined | | model.description| Display text of object on model card | string | '' | | model.url | Link to show on model card | string | '' | | model.placement | Determines plane on which the model will be rendered | 'floor' \| 'wall' | undefined | | model.resizable | Determines if model allows rescale | boolean| undefined | | beforeClose | Function called before ending the experience* | (container: HTMLElement) => void | defaultBeforeClose | | callToAction | Enable CTA on AR experience | CallToAction | undefined |

*: If provided, beforeClose function MUST eventually dispatch the event r2u-webxr-close for the WebXR session to end properly.

Examples

activateAR

import React, { createRef } from 'react'
import ReactDOM from 'react-dom'

import '@google/model-viewer'

import { ModelViewer, activateAR } from '@r2u/react-ar-components'
import type { ModelViewerElement } from '@r2u/react-ar-components'

import style from './style.module.css'

const App: React.FC = () => {
  const usdz = 'http://localhost:8080/mesh_01000.usdz'
  const glb = 'http://localhost:8080/mesh_01000.glb'
  const imageUrl = 'https://via.placeholder.com/150'
  const viewerRef = createRef<ModelViewerElement>()

  return (
    <div>
      <div>
        <h1>AR</h1>
        <button type="button" onClick={() => activateAR({ glb, usdz })}>
          View in 3D
        </button>
      </div>
      <div>
        <h1>ModelViewer</h1>
        <ModelViewer
          ref={viewerRef}
          src={glb}
          alt="3D model"
          style={style}
          poster={imageUrl}
        />
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

activateWebXR

import React from 'react'

import { activateWebXR } from '@r2u/react-ar-components'


const App: React.FC = () => {

  const model = {
    resizable: true,
    name: 'Chair',
    description: 'Comfy chair',
    glb:
      'http://localhost:8080/mesh_01000.glb',
    url: 'https://google.com',
    placement: 'floor',
  }

  return (
    <div>
      <h1>WebXR</h1>
      <button type="button" onClick={() => activateWebXR({ model })}>
        Floor
      </button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Testing

make start

• Access http://localhost:8080
• Or expose local port if testing on another device or on mobile
  • Eg: npx localtunnel --port 8080
  • Access exposed link
• Test banner.html

Analyze bundle size

React App build

yarn install
yarn build:app --analyze

Visit http://localhost:8888

SDK build

yarn install
yarn build:sdk --analyze

Visit http://localhost:8888