4.4.0 • Published 4 years ago

react-ar-components v4.4.0

Weekly downloads
13
License
SEE LICENSE IN LI...
Repository
github
Last release
4 years ago

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
paramdescriptiondefault
styleobject containing custom CSS classes to customize this component{ modelViewerSmall: '', modelViewerBig: '', modelViewerBackground: '' }
onClickfunction to handle click event() => undefined
componentDidMountfunciton to handle mount event() => undefined
namemodel name''
progressBarPositionprogress bar position ('top', 'middle' or 'bottom')'top'
progressBarColorprogress bar color ('gray', 'rgba(89, 84, 84, 0.6)', '#c5c5c5')null
exposurecontrols the exposure of both the model and skybox'0.5'
shadowIntensityopacity of the shadow'1'
shadowSoftnessblurriness of the shadow'0'
posterimage url displayed before loading the modelnull
glburl of the GLB file for desktop devices''
autoRotatedetermines if the model will rotate automaticallytrue
cameraControlsdetermines if the user will control the cameratrue
popupdetermines if the viewer will be able to open a popup windowtrue
onTogglefunction to handle popup toggle event''
ARLink
paramdescriptiondefault
styleobject containing custom CSS classes to customize this component{ link : '' }
onClickfunction to handle click event() => undefined
componentDidMountfunciton to handle mount event() => undefined
usdzurl of the USDZ file for iOS devices''
glburl of the GLB file for Android devices''
namemodel name''
resizedetermines if model allows rescalefalse
ARButton
paramdescriptiondefault
styleobject containing custom CSS classes to customize this component{ container : '', text: '' }
...restsame as ARLink
ARImage
paramdescriptiondefault
...restsame 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
paramdescriptiondefault
glbsarray of GLB urls for desktop devices[]
...restsame as ModelViewer

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 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</h1>
      <ModelViewer glb={glb} name="3D model" style={style} />
    </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'))

Local Testing

  • Start local webpack server with 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