React components for Augmented Reality on the web.
npm install @r2u/react-ar-componentsReact components for Augmented Reality on the web.
- ModelViewer: used to interact with a 3D model on the browser (desktop)
- WebXROverlay: DOM overlay used during a WebXR session (Chrome browser on mobile)
- 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.
##### 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(
`
##### 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(
`
`shell`
make start
- Access http://localhost:8080npx localtunnel --port 8080
- Or expose local port if testing on another device or on mobile
- Eg:
- Access exposed link
- Test banner.html
`shell`
yarn install
yarn build:app --analyze
Visit http://localhost:8888
`shell``
yarn install
yarn build:sdk --analyze
Visit http://localhost:8888