search

AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.3k stars 909 forks source link

When running the A-Frame location-based sample code in React, errors occur. #515

Open Hyeonoo-Park opened 1 year ago

Hyeonoo-Park commented 1 year ago

Do you want to request a feature or report a bug? bug

What is the current behavior?

I am developing based on the A-Frame location based sample code using React, but I am getting an error when I run it on the device. I am not familiar with web programming, so I am not sure if this is a bug or if I am doing something wrong. To resolve the issue, I received the AR.js source and made a few modifications and now it works without errors.

The errors are:

The development environment and source are as follows:

Environment set up with Webpack following the guide on the AR.js home page in React.

Modifications to the AR.js source:

I hope to confirm whether this is a bug and incorporate it into an update.

If the current behavior is a bug, please provide the steps to reproduce.

Please mention other relevant information such as the browser version, Operating System and Device Name

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

nickw1 commented 1 year ago

Not sure what the problem is but will try and investigate it. Do you use create-react-app or write your own build script? If the latter, do you have your package.json?

Hyeonoo-Park commented 1 year ago

"I am using a project created using 'Create React App.

nickw1 commented 1 year ago

Thanks - will take a look if I have a moment.

miqmago commented 1 year ago

This is happening to me also with the three.js location based example. When using the A-Frame location based example it does not happen:

ar-threex-location-only.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'degToRad')
    at i._haversineDist (ar-threex-location-only.js:1:3291)
    at i._gpsReceived (ar-threex-location-only.js:1:2957)
    at ar-threex-location-only.js:1:1989
nickw1 commented 1 year ago

Strange, I don't get that with the three location-based example but will have a look.

miqmago commented 1 year ago

I've created a gist with the code:

https://gist.github.com/miqmago/e1430405b34d384dec5fd393d6ee3ded

This is meant to be useed in a stencil 3.0.1 component.

GordonSmith commented 1 year ago

FYI - I am getting this also - but only on my mobile device, the browser on my PC works...

nickw1 commented 1 year ago

@Hyeonoo-Park it looks like you have made additional changes, additional to those in @GordonSmith's PR. Do you want to submit a PR for your other changes?

Hyeonoo-Park commented 1 year ago

The same problem occurs in v3.4.4. I made a sample project and submitted a PR for the code I modified.

https://github.com/Hyeonoo-Park/react-ar-js-test

kalwalt commented 1 year ago

@Hyeonoo-Park i merged the fix for MathUtils from #523 #532 in the master branch now, It should be fine but can you test and tell me if it is ok?

Hyeonoo-Park commented 1 year ago

I'm sorry, it still hasn't been fixed. 3D model was visible in the test sample code, but not in the actual code. To run the React A-Frame code without errors, you need to add the following code to arjs-device-orientation-control.js.

Error! image

Fix: arjs-device-orientation-controls.js

import * as THREEx from "../../../three.js/build/ar-threex-location-only.js";

This is the entry code for a React component that uses A-Frame.

import React from "react";
import "@ar-js-org/ar.js/aframe/build/aframe-ar";
import "../components/avatar/a-character-gps";

import modelAvatar from "../avatar/svravatar.json";

function ArLBSAFrame() {
  return (
    <a-scene vr-mode-ui="enabled: false;" renderer="antialias: true; alpha: true" arjs='sourceType: webcam; videoTexture: false; debugUIEnabled: false'>
    <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
    <a-entity id='character-gps' character-gps={JSON.stringify(modelAvatar)}  gps-new-entity-place="longitude: 100, latitude: 30"></a-entity>
    </a-scene>
  );
}

export default ArLBSAFrame;
jywarren commented 1 month ago

Hi, I got the same error THREEx is not defined with a similar setup and am not using three.js, just a-frame. I will try to adapt the solution import * as THREEx from "../../../three.js/build/ar-threex-location-only.js"; by also including that file... but that seems like it shouldn't be necessary?

full error: https://gist.github.com/jywarren/c3f0670903e0595f1f37ae33be202837

which I believe leads to this line:

https://github.com/AR-js-org/AR.js/blob/e2f2893a7e0af8853687d34ca0aee7edf5321e9b/aframe/src/new-location-based/arjs-device-orientation-controls.js#L25

This makes sense in that I'm only seeing this error on mobile, not desktop testing.

Shouldn't it be possible to not use any threejs code? Thank you!

jywarren commented 1 month ago

Also, including the same file just above the aframe script worked for me:

     <script src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js">
     <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js">
sey323 commented 1 month ago

I was using Nuxt3 and had the same problem, but I solved it by specifying version 3.4.5 with reference to the following ISSUE.

https://github.com/AR-js-org/AR.js/issues/538#issuecomment-1544316282

<script type="text/javascript" src="https://aframe.io/releases/1.6.0/aframe.min.js" ></script>
<script type="text/javascript" src="https://www.unpkg.com/@ar-js-org/ar.js@3.4.5/three.js/build/ar-threex-location-only.js" ></script>
<script type="text/javascript" src="https://www.unpkg.com/@ar-js-org/ar.js@3.4.5/aframe/build/aframe-ar.js"></script>