hatsumatsu / react-three-arjs

AR.js with react-three-fiber

@artcom/react-three-arjs

React components and hooks for creating AR.js applications with react-three-fiber

npm install github:artcom/react-three-arjs#v0.1.5

Usage

Example

import ReactDOM from "react-dom"
import React from "react"

import { ARCanvas, ARMarker } from "@artcom/react-three-arjs"

ReactDOM.render(
  <ARCanvas
    camera={ { position: [0, 0, 0] } }
    dpr={ window.devicePixelRatio }
    onCreated={ ({ gl }) => {
      gl.setSize(window.innerWidth, window.innerHeight)
    } }>
    <ambientLight />
    <pointLight position={ [10, 10, 0] }  />
    <ARMarker
      type={ "pattern" }
      patternUrl={ "data/hiro.patt" }>
      <mesh>
        <boxBufferGeometry args={ [1, 1, 1] } />
        <meshStandardMaterial color={ "green" } />
      </mesh>
    </ARMarker>
  </ARCanvas>,
  document.getElementById("root")
)

API

ARCanvas

<ARCanvas
  children                                        // regular children
  arEnabled                                       // if false, it will render children into <Canvas /> without AR context
  patternRatio = 0.5                              // passed to arToolkit context¹
  detectionMode = "mono_and_matrix"               // passed to arToolkit context¹
  cameraParametersUrl = "data/camera_para.dat"    // passed to arToolkit context¹
  matrixCodeType = "3x3"                          // passed to arToolkit context¹
  onCameraStreamReady                             // callback which will be invoked when camera stream starts
/>

¹https://ar-js-org.github.io/AR.js-Docs/marker-based/#threejs

ARMarker

<ARMarker
  children              // regular children
  type                  // arToolkit marker type, "barcode" or "pattern"
  barcodeValue          // if type="barcode", its algorithmic value
  patternUrl            // if type="pattern", a link to its pattern file
  params                // object which accepts all marker settings²
  onMarkerFound         // callback which will be invoked when marker has been found
  onMarkerLost          // callback which will be invoked when previously found marker has been lost
/>

²https://ar-js-org.github.io/AR.js-Docs/marker-based/#api-reference-for-marker-based

AR.js caveats

• AR.js cannot be bundled, since it exposes global variables.
• AR.js context requires camera_para.dat file.
• Look at the example using webpack for bundling.

ToDos

• Add example video/gif
• CI Build
• Use ar.js as module, depends on AR-js-org/AR.js#116