artcom / react-three-arjs

AR.js with react-three-fiber
174 stars 43 forks source link

AR NFT Tracking #24

Open antokhio opened 2 years ago

antokhio commented 2 years ago

Hi, trying to make it work, with some partial success

So i copy over component ARMarker component and changed this first import:

/* eslint-disable no-underscore-dangle */
import { ArMarkerControls } from '@ar-js-org/ar.js/three.js/build/ar-threex-nft';

so it's loading it's finding the image, but there is no model for some reason... image

any clue witch direction i should dig? the code is on gist https://gist.github.com/antokhio/140b52ffa0742bbe0a185d97a13f1475

this markeRoot transformation image

kalwalt commented 2 years ago

It could be some different incompatibilities between three.js versions, or maybe something else. From the log i see the warning about BoxBufferGeometry, have you tried to change to BoxGeometry? @j-era also did this project https://github.com/j-era/react-three-arnft have you tried?

antokhio commented 2 years ago

Hi @kalwalt thanks for tip link to j-era project, gonna test it now. I think the line 'No canvas available` maybe has something to do with it... About three js version, will try to downgrade to the one in the package... But ARMarker works just fine like that....

antokhio commented 2 years ago

@kalwalt Hi so, i managed to reassemble this from empty project based on your code Now it works on the dev desktop, not sure why but it seems not to work on phone...

the git repo with https://github.com/antokhio/arjs-artcom-arnft-test

if you like we could prolly assemble a PR for this lib... image

hostland commented 9 months ago

Hello, how many markers could you load in NFT markers array?

antokhio commented 9 months ago

Hello, how many markers could you load in NFT markers array?

I think as much as you want, but performance degradation quite significant, I would say 2-3 maximum 4

rafheros commented 2 months ago

does the new es6 @ar-js-org/ar.js package support NFT tracking? I was not able to implement it, it finds the marker but not show any model.

I saw the @j-era also did this project https://github.com/j-era/react-three-arnft implementation but it seams to be a more bare bone implementation.

I would like to see if its possible to implement NFT in a more clean matter like this implementation with markers

antokhio commented 2 months ago

@rafheros you can try that repo https://github.com/antokhio/react-three-jsartoolkitnft

I wanted to share that as package, but i stuck with bundling a web worker to an npm package, you can just copy paste code to your project. I think I've used that for couple of projects