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

[Hyeonoo-Park]

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:

• THREEx is not defined
  
• Math.radToDeg, Math.degToRad
  

The development environment and source are as follows:

• 
• 

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

• List of packages used.
  
• Source code sample that causes the error.
  

Modifications to the AR.js source:

• Changed "import { Math as MathUtils } from "three"" to "import { Math as MathUtils } from "three""
• 
• Changed "THREE.Math" to "THREE.MathUtils"
• 
  • Affected code is listed in the following list:
    • AR.js/aframe/dist/main.js
    • AR.js/three.js/src/threex/threex-arvideoinwebgl.js
    • AR.js/three.js/src/location-based/js/location-based.js
    • AR.js/three.js/src/location-based/js/lb.js
    • AR.js/aframe/src/location-based/gps-projected-camera.js
    • AR.js/aframe/src/location-based/gps-camera.js
    • AR.js/aframe/src/new-location-based/gps-new-entity-place.js
    • AR.js/aframe/src/location-based/ArjsDeviceOrientationControls.js

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]

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]

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

[nickw1]

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

[miqmago]

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]

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

[miqmago]

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]

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

[nickw1]

@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]

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]

@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]

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!

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]

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:

AR.js/aframe/src/new-location-based/arjs-device-orientation-controls.js

Line 25 in e2f2893

this._orientationControls = new THREEx.DeviceOrientationControls(

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]

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]

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.

#538 (comment)

<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>