react-three-arnft

Image tracking with @kalwalt/jsartoolkit-nft and react-three-fiber.

npm install react-three-arnft

Usage

Example

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

import { ARCanvas, NFTMarker } from "react-three-arnft"

ReactDOM.render(
  <ARCanvas interpolationFactor={24}>
    <NFTMarker url={"data/marker/pinball"}>
      <mesh scale={[100, 100, 100]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshNormalMaterial opacity={0.5} transparent={true} />
      </mesh>
    </NFTMarker>
    <ambientLight />
  </ARCanvas>,
  document.getElementById("root"),
)

API

ARCanvas

<ARCanvas
  children
  arEnabled = true                   // `false` will disable AR and render children into regular r3f <Canvas />
  interpolationFactor = 1,           // increase to enable smoother but slower tracking
/>

NFTMarker

<NFTMarker
  children
  url // set path to marker directory (contaiing: *.fset, *.fset3 and *.iset)
/>

Notes

• Camera parameters file must be served from data/camera_para.data
• Start with the example using webpack for bundling.

ToDos

• [x] Support multiple NFT Markers: https://github.com/webarkit/jsartoolkitNFT/issues/32
• [x] NPM Module
• [ ] CI Build
• [ ] Host example
• [ ] Demo Video/GIF