@real2u/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)
• ARLink: similar to an anchor tag (mobile)
• ARButton: similar to a button tag (mobile)
• ARImage: similar to an img tag (mobile)
• ARCarousel: similar to a carousel component to interact with multiple 3D models (mobile, desktop)

ModelViewer

param	description	default
style	object containing custom CSS classes to customize this component	{ modelViewerSmall: '', modelViewerBig: '', modelViewerBackground: '' }
onClick	function to handle click event	() => undefined
componentDidMount	funciton to handle mount event	() => undefined
type	type of the 3D viewer ('google' or 'sketchfab')	'google'
name	model name	''
progressBarPosition	progress bar position ('top', 'middle' or 'bottom')	'top'
poster	image (url) displayed before loading the model	null
glb	url of the GLB file for desktop devices on 'google' viewers	''
autoRotate	determines if the model will rotate automatically on 'google' viewers	true
cameraControls	determines if the user will control the camera on 'google' viewers	true
popup	determines if the viewer will be able to open a popup window on 'google' viewers	true
onToggle	function to handle popup toggle event on 'google' viewers	''
src	url of the 'sketchfab' model	''

ARLink

param	description	default
style	object containing custom CSS classes to customize this component	{ link : '' }
onClick	function to handle click event	() => undefined
componentDidMount	funciton to handle mount event	() => undefined
usdz	url of the USDZ file for iOS devices	''
glb	url of the GLB file for Android devices	''
name	model name	''
resize	determines if model allows rescale	false

ARButton

param	description	default
style	object containing custom CSS classes to customize this component	{ container : '', text: '' }
...rest	same as ARLink

ARImage

param	description	default
...rest	same as ARLink

The ARImage component adds a transparent overlay on top of an existing img, which is why it should be mounted as a child of an enclosing container.

ARCarousel

param	description	default
glbs	array of GLB urls for desktop devices	[]
...rest	same as ModelViewer

The ARCarousel component encapsulates the ModelViewer inside a carousel component.

Example

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import '@google/model-viewer'
import {
  ARImage,
  ModelViewer,
  ARButton,
  ARCarousel,
  ARLink
} from '@real2u/react-ar-components'

import style from './style.module.css'
const usdz = 'http://localhost:8080/mesh_01000.usdz'
const glb = 'http://localhost:8080/mesh_01000.glb'
const imageUrl = 'https://via.placeholder.com/150'
const sketchfabSrc = 'https://sketchfab.com/models/0bb18ae775dc41e9908cbd7cf7e95af6/embed?autostart=1'

const App = () => (
  <div>
    <div>
      <h1>ARLink</h1>
      <ARLink glb={glb} usdz={usdz}>
        View in 3D
      </ARLink>
    </div>
    <div>
      <h1>ARImage</h1>
      <div style={{ width: '200px' }}>
        <img src={imageUrl} alt="3D model" style={{ width: '100%' }}/>
        <ARImage glb={glb} usdz={usdz} style={style} />
      </div>
    </div>
    <div>
      <h1>ModelViewer (type sketchfab)</h1>
      <ModelViewer type="sketchfab" src={sketchfabSrc}/>
    </div>
    <div>
      <h1>ModelViewer (type google)</h1>
      <ModelViewer glb={glb} name="3D model" style={style}/>
    </div>
    <div>
      <h1>ModelViewer (type google, popup false)</h1>
      <ModelViewer glb={glb} name="3D model" style={style} popup={false}/>
    </div>
    <div>
      <h1>ARButton</h1>
      <ARButton glb={glb} usdz={usdz} text="View in 3D" style={style} />
    </div>
    <div>
      <h1>ARCarousel</h1>
      <ARCarousel glbs={[glb, glb, glb]} style={style}/>
    </div>
  </div>
)

ReactDOM.render(<App/>, document.getElementById('root'))