@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)

Methods

• activateAR: tries to open a GLB model on SceneViewer or a USDZ model on quicklook

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

Example

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'))

Testing

yarn install
yarn build:app
yarn dev

• Access http://localhost:8080
• Or expose local port if testing on another device or on mobile
  • Ex: using ngrok
  • Access exposed link
  • If receiving Invalid Host header, run:
    • yarn dev --disable-host-check

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