Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Hyeonoo-Park opened this issue Feb 7, 2023 · 15 comments
Assignees
Labels
bug Something isn't working

Comments

@Hyeonoo-Park
Copy link
Contributor

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
    image
  • Math.radToDeg, Math.degToRad
    image

The development environment and source are as follows:

  • image
  • image

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

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

Modifications to the AR.js source:

  • Changed "import { Math as MathUtils } from "three"" to "import { Math as MathUtils } from "three""
  • image
  • Changed "THREE.Math" to "THREE.MathUtils"
  • image
    • 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
Copy link
Collaborator

nickw1 commented Feb 10, 2023

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
Copy link
Contributor Author

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

@nickw1
Copy link
Collaborator

nickw1 commented Feb 14, 2023

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

@miqmago
Copy link

miqmago commented Feb 14, 2023

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
Copy link
Collaborator

nickw1 commented Feb 14, 2023

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

@miqmago
Copy link

miqmago commented Feb 14, 2023

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

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

GordonSmith added a commit to GordonSmith/AR.js that referenced this issue Feb 18, 2023
THREE.Math was renamed to THREE.MathUtils in r113.
THREE.PlaneBufferGeometry is deprecated.

Fixes AR-js-org#515

Signed-off-by: Gordon Smith <[email protected]>
@nickw1
Copy link
Collaborator

nickw1 commented Feb 25, 2023

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

@kalwalt kalwalt added the bug Something isn't working label Feb 28, 2023
@Hyeonoo-Park
Copy link
Contributor Author

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
Copy link
Member

kalwalt commented Apr 4, 2023

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

@kalwalt kalwalt self-assigned this Apr 4, 2023
@Hyeonoo-Park
Copy link
Contributor Author

Hyeonoo-Park commented Apr 7, 2023

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

jywarren commented May 23, 2024

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:

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

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

sey323 commented Jun 9, 2024

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/[email protected]/three.js/build/ar-threex-location-only.js" ></script>
<script type="text/javascript" src="https://www.unpkg.com/@ar-js-org/[email protected]/aframe/build/aframe-ar.js"></script>

@nickw1
Copy link
Collaborator

nickw1 commented Sep 10, 2024

@jywarren not sure if this is what you meant by "Shouldn't it be possible to not use any threejs code?" but the current A-Frame location-based code uses functionality from the three.js location-based code to avoid code duplication.

PR #563 might fix it, I haven't had time to work on AR.js for a while but might get the chance to test it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants