vasturiano / aframe-forcegraph-component

Force-directed graph component for A-Frame
https://vasturiano.github.io/aframe-forcegraph-component/
MIT License
77 stars 31 forks source link

Can not render cube in Aframe using this component #8

Closed AyushVisen closed 6 years ago

AyushVisen commented 6 years ago

I am doing like this "forcegraph="json-url: graph.json; node-three-object: box;"" and but instead of box, sphere is being rendered. Their is no docs or example to do that, so I tried this way but no luck.

vasturiano commented 6 years ago

@S73AM, the node-three-object property should reference a function that returns a ThreeJS Object3d. For example:

node-three-object: node => new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshBasicMaterial({ color: 'red' }))
AyushVisen commented 6 years ago

Thanks @vasturiano for help. One more thing in which I am struggling. Can you tell me how do I add Eventlisteners to the nodes using ID? So, that if i click on any node I can perform the specific action.

vasturiano commented 6 years ago

@S73AM how do you 'click' on an aframe component? This component does not currently handle click events as that's generally controller specific. However, it could expose a onCenterHover method that triggers whenever there is a node/link intercepted at the center of the viewport. The same manner that labels are shown currently. Would this help your case?

AyushVisen commented 6 years ago

@vaturiano Well in my case I want to click on the nodes and open up a Page or URL after click. Is it possible?

AyushVisen commented 6 years ago

@vasturiano Well in my case I want to click on the nodes and open up a Page or URL after click. Is it possible?

waldercong commented 6 years ago

@vasturiano if you exposed onCenterHover, would that be able to return the node id of the focused node? If so, that would help my use case at least. Thanks btw!

vasturiano commented 6 years ago

@waldercong ok I've added two new callback props to the component (v2.7.0): on-node-center-hover and on-link-center-hover. Each of them passes the currently hovered node/link object as a function parameter (or null on hover out).

You should be able to use it like this:

on-node-center-hover: node => console.log(node);

You can keep track of the hovered nodes and use it to handle click or other controller events on the scene itself.

Let me know if this works for you.

waldercong commented 6 years ago

Thank you!! @vasturiano