search

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.12k stars 391 forks source link

Issue getting demo to work with react #513

Open lsproule opened 3 months ago

lsproule commented 3 months ago 
//@ts-nocheck
import React, { useEffect, useRef } from 'react';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';

export const AFrameViewer = ({ data }) => {
  const sceneRef = useRef(null);

  useEffect(() => {
    const sceneEl = sceneRef.current;
    const arSystem = sceneEl.systems["mindar-image-system"];
    sceneEl.addEventListener('renderstart', () => {
      arSystem.start(); // start AR 
    });

  }, []);

  return (
    <div className="absolute mt-48 w-full">
      <a-scene ref={sceneRef} mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
        <a-assets>
          <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/assets/card-example/card.png" />
          <a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.5/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item>
        </a-assets>

        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
        <a-entity mindar-image-target="targetIndex: 0">
          <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
          <a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" />
        </a-entity>
      </a-scene>
    </div>
  )
}
lsproule commented 3 months ago

So we are able to get the camera to come up, but we keep getting this error

mind-ar_dist_mindar-…js?v=9352a415:28693 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dummyRun')
    at R1.dummyRun (mind-ar_dist_mindar-…v=9352a415:28693:49)
    at NewSystem._startAR (mind-ar_dist_mindar-…v=9352a415:28899:27)
dummyRun    @    mind-ar_dist_mindar-…js?v=9352a415:28693
_startAR    @    mind-ar_dist_mindar-…js?v=9352a415:28899
await in _startAR (async)        
(anonymous)    @    mind-ar_dist_mindar-…js?v=9352a415:28877
Show less

I think it seems to be in the startup function, but I don't know, and I am can't see what I am doing wrong. I appreciate any help. Thanks