@r2u/react-ar-components

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