@r2u/react-ar-components NPM

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