React AR Components

React components for Augmented Reality on the web.

$3

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

$3

- 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:

``tsx

`

##### 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.

$3

##### activateAR

`tsx
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()

return (


ReactDOM.render(, document.getElementById('root'))
`

##### activateWebXR

`tsx
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 (


ReactDOM.render(, document.getElementById('root'))
`

Testing

`shell
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

$3

`shell
yarn install
yarn build:app --analyze
`

Visit http://localhost:8888

$3

`shell
yarn install
yarn build:sdk --analyze
``

Visit http://localhost:8888