https://github.com/artcom/react-three-arjs
AR.js with react-three-fiber
https://github.com/artcom/react-three-arjs
arjs react react-three-fiber threejs
Last synced: about 1 year ago
JSON representation
AR.js with react-three-fiber
- Host: GitHub
- URL: https://github.com/artcom/react-three-arjs
- Owner: artcom
- Created: 2021-02-25T14:00:54.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-08-22T11:12:39.000Z (almost 3 years ago)
- Last Synced: 2025-03-30T03:05:54.236Z (about 1 year ago)
- Topics: arjs, react, react-three-fiber, threejs
- Language: JavaScript
- Homepage:
- Size: 3.29 MB
- Stars: 188
- Watchers: 12
- Forks: 45
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @artcom/react-three-arjs
React components and hooks for creating [AR.js](https://github.com/AR-js-org/AR.js) applications with [react-three-fiber](https://github.com/pmndrs/react-three-fiber)
```
npm i @artcom/react-three-arjs
```
## Usage
Provide a [camera_para.dat](./example/data/camera_para.dat) file in your public folder, default path is `data/camera_para.dat`. See the [example](./example).
```jsx
import ReactDOM from "react-dom"
import React from "react"
import { ARCanvas, ARMarker } from "@artcom/react-three-arjs"
ReactDOM.render(
{
gl.setSize(window.innerWidth, window.innerHeight)
} }>
,
document.getElementById("root")
)
```
### Demo
* [CodeSandbox Demo](https://codesandbox.io/s/jolly-hodgkin-ssu33)
## API
### ARCanvas
```jsx
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
2 https://github.com/AR-js-org/AR.js/blob/00fc2a92af1a756600eb53a57a84f101a2c0435f/three.js/src/threex/threex-artoolkitsource.js#L11-L26
3 https://docs.pmnd.rs/react-three-fiber/api/canvas
### ARMarker
```jsx
```
1 https://ar-js-org.github.io/AR.js-Docs/marker-based/#api-reference-for-marker-based