search

vasturiano / 3d-force-graph-ar

3D force-directed graph component in AR
https://vasturiano.github.io/3d-force-graph-ar/example/async-load/
MIT License
96 stars 21 forks source link

Probably marker recognition fails - no error, no logs... I'm lost #7

Open rmeissn opened 3 years ago

rmeissn commented 3 years ago

Describe the bug I've integrated 3d-force-graph and 3d-force-graph-ar into a Vue 2.6 application. 3d-force-graph works as expected, but not the AR version. Whenever I open up the AR version (using the basic example, adapted for Vue), the App loads correctly, requests the camera and shows the recorded picture. Unfortunately there is no graph shown, whereas the minimal example (without Vue, served from the same server) shows a graph. I guess that the Vue version is not recognizing the marker. Unfortunately there is no useful log message. The only log difference I observe between those two attempts is: WARNING: Multiple instances of Three.js being imported. But I got no idea where this message comes from ...

To Reproduce I've pushed my implementation to https://gitlab.com/Tech4Comp/fachlandkarten-ui/-/tree/force-graph-ar You should be able to clone the repo, checkout the "force-graph-ar" branch, install dependencies and run npm run serve to serve the application on port 8081. There are various cards on the homepage. One is marked red - 3d-force-graph-ar inside Vue - and one is marked green - standalone version. The red one isn't working, even though it should work....

Code of the standalone version: https://gitlab.com/Tech4Comp/fachlandkarten-ui/-/blob/force-graph-ar/public/test.html Code of the Vue version: https://gitlab.com/Tech4Comp/fachlandkarten-ui/-/blob/force-graph-ar/src/views/forceGraphAR.vue

BTW: The yellow marked card is using the normal 3d-force-graph. The AR version uses a different index.html file, as it includes "aframe" and "aframe-ar", which are not needed as of the remaining App.

As it's quite easy to checkout and run this App I haven't prepared a minimal online example.

Desktop

vasturiano commented 3 years ago

@rmeissn thanks for reaching out.

I'm not versed enough in Vue to be able to provide much useful advice with that integration, but one difference I do notice is I'm not seeing the script imports of aframe and aframe-vr, which are present in the plain version: https://gitlab.com/Tech4Comp/fachlandkarten-ui/-/blob/force-graph-ar/public/test.html#L4-5

These two libs are required peer dependencies for this module to function. Are you certain you are importing them as global modules into your vue app?

rmeissn commented 3 years ago

@vasturiano Many thanks for the fast reply!

Yes, I've imported these libraries as of this file: https://gitlab.com/Tech4Comp/fachlandkarten-ui/-/blob/force-graph-ar/public/indexAR.html#L9 , which is used for the AR part of the App. This is also visible inside the browser logs, as there would be error logs without these libraries.

Might this issue be related to importing Three.js multiple times, as stated by the log message? Is it possible to activate a verbose logging of your library to debug my situation?

vasturiano commented 3 years ago

@rmeissn I don't think the dual import of Three would cause an issue like this, unless you see it together with other incompatibility errors in the console.

There isn't really a debug mode in this module, that would be more of an aframe-ar thing. Which makes me think, have you tested this Vue integration with the simple exam from the aframe-ar repo? That should let you know whether the issue is related with this module or aframe-ar.