aframe-forcegraph-component
aframe-forcegraph-component copied to clipboard
handling clicks (not just hover)
Hi,
I'm trying to achieve this zoom-effect using the aframe interface. Non aframe-code: https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html#L20
The "on-node-center-hover" works fine, but I was wondering how clicks should be handled in the aframe component? I see no "on-node-click" callback handler in the API. Or should "onmousedown" just be checked during hovering?
Thanks for a great project!
@waldenn this is a good question. I'm not overly familiar with how additional controllers interact with a-frame. Generally speaking in a VR environment there isn't the concept of a mouse pointer like in a regular desktop application. On the wrapping component 3d-force-graph-vr
I've integrated some controller functionality:
https://github.com/vasturiano/3d-force-graph-vr/blob/master/src/3d-force-graph-vr.js#L112
Potentially this could be extended to support other types of interactions, but the challenge is to keep it generic and not device specific.
I'm totally open to ideas if you have an understanding on how to do this in an elegant manner. 😃
Hey Vasco,
I made a modification to the basic demo that works, based on this code. Check the console.log messages when you click on a node.
See also: aframe-mouse-cursor-component. Note: "This feature is now available in A-Frame v0.6.1 by setting "a-scene cursor="rayOrigin: mouse".
I think this should probably be documented in the API docs. I will build the zoom-demo further and report any issues below.
Other relevant documentation: interactions-and-controllers. I don't own a VR headset, so I can't test these custom events to see how generic this "cursor-click" is.
I now see there is also the event-set component. Looks like that can handle multiple event-types at once: demo
- Question: How would I get the 3d-force-graph cameraPosition() method available in the aframe object? I don't see that method in document.querySelectorAll("[forcegraph]")[0].components. I don't understand how that code works. Where is the "cameraPosition()" function implemented?
@waldenn did you ever succeed in doing that? I can't seem to get access to the node object in order to add the event listener
I opened an issue about super-hands integration https://github.com/vasturiano/aframe-forcegraph-component/issues/27 it looks like it is connected with this one