Nodes names not displayed

micrology commented 2 years ago

Describe the bug 3d-force-graph displays the node name over the node when the cursor is hovered over it. The same node object attribute, nodeLabel, is listed in the ReadMe for 3d-force-graph-vr, but the node name does not appear over the node, but near the centre of the graph when viewing the initial display (the one with the VR button). When one switches to VR mode, the names do not appear at all.

To Reproduce Run the 'basic' example, with a modification to line 16: instead of

     nodes: [...Array(N).keys()].map(i => ({ id: i})),

use

     nodes: [...Array(N).keys()].map(i => ({ id: i, name: i })),

to use the node id as its name

Expected behavior Something similar to the display of node names of 3d-force-graph

Desktop (please complete the following information):

OS: MacOS
Browser Chrome
Version 69 with WebXR emulation API

Additional context I also tried extending the nodes with a SpriteText holding the name, similar to the Text In Links example, but the sprite text is then hidden behind the node sphere.

vasturiano commented 2 years ago

@micrology thanks for reaching out.

The difference in how the node/link labels are shown is different from 3d-force-graph because in that module the labels are simple absolute positioned div elements which are floating in front of the canvas, according to the pointers coordinates.

That approach is not possible in the VR/Aframe world because when entering the VR mode only Three objects belonging to the VR scene are actually shown. Any other DOM elements external to the scene, like div tooltips are excluded. Thus, the approach here is to have a-text tags that are used to display the label/desc content. They are part of the Aframe scene and thus shown in VR mode. These text objects are positioned in the VR coordinate system, not in terms of canvas pixels, therefore they are fixed into position and attached to the camera itself so their location doesn't change, relative to the user's point of view.

However, these labels should be showing both in and out of VR mode. This example has labels associated, and in my case it works in both modes. Could you check that it works the same for you, with labels even after entering VR mode?

micrology commented 2 years ago

Thank you for this very helpful explanation.

Although I see the labels before entering VR mode, I don't see then in VR mode. However, this may be because I am using the WebXR API emulator, rather than a real VR headset (an Oculus Quest 2 is on order, but hasn't arrived yet).

I had hoped to get something more like the 3d-force-graph behaviour, so I experimented with adding a hidden sprite to each node and an onNodeHover callback function that would reveal the sprite, but got an error: THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites. when displaying the VR scene so perhaps this is not possible.

vasturiano commented 2 years ago

@micrology the cause of the issue is that Aframe has trouble raycasting against Sprite type objects.

ThreeJS recommends setting the raycaster to support sprites, but this needs to happen inside the Aframe raycaster source code.

Until then there's not a whole lot that can be done to get Sprites to work properly with raycasting (require to detect hover interactions in this module). Sorry about that.

eviltik commented 2 years ago

vasturiano / 3d-force-graph-vr

Nodes names not displayed #31