Typed Fork of @artcom/react-three-arjs

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


``
npm i gle-react-three-arjs
`

Usage

Provide a camera_para.dat file in your public folder, default path is data/camera_para.dat. See the example.

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

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

ReactDOM.render(
camera={ { position: [0, 0, 0] } }
onCreated={ ({ gl }) => {
gl.setSize(window.innerWidth, window.innerHeight)
} }>


type={ "pattern" }
patternUrl={ "data/hiro.patt" }>





,
document.getElementById("root")
)

`

$3

 

* CodeSandbox Demo

API

$3

`jsx
children // regular children
arEnabled // if false, it will render children into 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 ³
/>
`

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

² https://github.com/AR-js-org/AR.js/blob/00fc2a92af1a756600eb53a57a84f101a2c0435f/three.js/src/threex/threex-artoolkitsource.js#L11-L26

³ https://docs.pmnd.rs/react-three-fiber/api/canvas

$3

`jsx
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
/>
``

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