React components and hooks for creating AR.js applications with react-three-fiber
npm i @artcom/react-three-arjs
Provide a camera_para.dat file in your public folder, default path is data/camera_para.dat. See the 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] } }
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")
)
<ARCanvas
children // regular children
arEnabled // if false, it will render children into <Canvas /> without AR context
tracking // if false, it will stop tracking
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
onCameraStreamError // callback which will be invoked when camera stream fails, e.g.: permissions
sourceType = "webcam" // set camera source type, see ar.js code ²
...props // props are passed to the r3f canvas ³
/> 1 https://ar-js-org.github.io/AR.js-Docs/marker-based/#threejs
3 https://docs.pmnd.rs/react-three-fiber/api/canvas
<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 ¹, e.g. params = {{ smooth: true }}
onMarkerFound // callback which will be invoked when marker has been found
onMarkerLost // callback which will be invoked when previously found marker has been lost
/>1 https://ar-js-org.github.io/AR.js-Docs/marker-based/#api-reference-for-marker-based