vasturiano / 3d-force-graph-ar Goto Github PK

Describe the bug
I am trying to bring this dataset alive. It works in your 3D and 2D versions of this lib just fine but not here. The demos all work flawless. However all of them fail when using them on my server instead of github.

To Reproduce
Steps to reproduce the behavior:

1. Use any of the examples
2. Set https://serverstats.nordgedanken.dev/relations as dataset

Expected behavior
Graph shows up.

Smartphone (please complete the following information):

• Device: One Plus 7 pro
• OS: Android 11
• Browser: Chrome
• Version: 90.0.4430.91

Three.SpriteText lib seems not compatible with current 3d-force-graph-ar due
THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites.
error

To Reproduce
GoTo examples
https://vasturiano.github.io/3d-force-graph-ar/example/text-nodes/
or
https://vasturiano.github.io/3d-force-graph-ar/example/text-links/
and check dev console.

Permanently reproducible at least on
MacOS Catalina with Chrome Version 111.0.5563.146

but sure this is not platform-dependent story

Hi @vasturiano thanks for the amazing project.
But I was unable to get the following examples working
https://vasturiano.github.io/3d-force-graph-ar/example/text-nodes/
https://vasturiano.github.io/3d-force-graph-ar/example/img-nodes/
https://vasturiano.github.io/3d-force-graph-ar/example/text-links/

Somehow it fails to detect the Image Target and just sits idle. This is being observed in Iphone XR, a latest android device and chrome browser on desktop as well.

Steps to reproduce the behavior:

1. Open an example
2. Give camera permission
3. Point the camera to the Hiro image target
4. Nothing happens

Ideally, a graph should appear in front of the image target.

Desktop

• OS: MacOS Monterey 12.2.1
• Browser: Google Chrome, Safari

Smartphone

• Device: Android, Iphone XR
• Browser: Google Chrome

Is this a configuration issue somehow on my side? Please let me know.

Describe the bug
When opening the demos in Chrome for Android, the camera zoom appears to be set to maximum. I can't get the "hiro" target to be seen.
If I open the demos in Firefox for Android, camera zoom

To Reproduce
Steps to reproduce the behavior:

1. Visit https://vasturiano.github.io/3d-force-graph-ar/example/async-load/ - or any demo in Chrome for Android.

Screenshots
Chrome

FireFox

Smartphone (please complete the following information):

• Device: OnePlus 5T
• OS: Android 10
• Browser Chrome
• Version 92.0.4515.159

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

• OS: Fedora 34 (Linux)
• Browser: Firefox 88

Hi can you please give me an example of how to do a custom marker?
I tried to set up forcegraphar like this:
const Graph = ForceGraphAR({type:'pattern',url:'pattheart.patt'})

It did not work.

Thank you sir

Hi @vasturiano, really enjoyed this project
But I was unable to interact(pan, zoom, touch) with the graph via screen touch/WASD keys
Also, could not figure out how to trigger onNodeHover/onLinkHover/onNodeClick/onLinkClick functions.
Please help me out on this. Thank you!

I didn't classified this as a bug, because the error might be mine. Is there a way to control the frame size?
Everytime I generate any graph, the frame just fills all the available screen, and I wanted to control the canvas size. I tried multiple ways, but at runtime a video tag is appended, and I can't seem to have control of it. Any idea of what I might be doing wrong? Thank you.

Hi, I've been using this library a bit and it's really great! I had two suggestions for useful features to add to this.

The first is I noticed some issues where the links would cover the pictures I placed as nodes. If I could specify some gap where the link does not render within a certain distance of the node, that would make the graphs with images look a lot nicer. (Also the stacking of transparent parts of pngs is not quite handled right: if a png with transparency is drawn over a png behind it, the further image gets removed, but that might be hard to deal with)

The other feature that would be nice is if I could have multiple graphs assigned to different markers, so that you could point to different markers and see different graphs (not at the same time, but from the same window/url). There may be a way to do this, but I tried and I couldn't figure it out.

Thanks for making this code!