aframe-forcegraph-component

aframe-forcegraph-component copied to clipboard

Congratulations on your beautiful project for A-frame, Vasco

We are WebXR developers with A-frame and we would like to know how we can use Image or other Entity instead of Sphere.

We have already tried to make some adjustments with node-val or node-three-object and without effect.

Basically we would like to have an example like this: https://vasturiano.github.io/3d-force-graph-vr/example/img-nodes/ in A-frame.

Thank you very much for your return.

@mespper thanks for reaching out.

The difference with your example is that it needs to reference local js objects, like the Threejs sprites used to render the images. Therefore you can't purely rely on static html to inject the necessary attributes, you need to do some in JavaScript. Good news is that that's relatively easy, by doing some light DOM manipulation.

For example, if you have declared your A-frame entity DOM node in your scene as:

<a-entity id="fg"></a-entity>

You can insert attributes dynamically, including your desired nodeThreeObject using JavaScript as:

const fgEl = document.getElementById('fg');

const imgUrl = '<your url>';

fgEl.setAttribute('forcegraph', {
  nodes: myNodes,
  links: myLinks,
  nodeThreeObject: node => {
      const imgTexture = new THREE.TextureLoader().load(imgUrl);
      const material = new THREE.SpriteMaterial({ map: imgTexture });
      const sprite = new THREE.Sprite(material);
      sprite.scale.set(12, 12);

      return sprite;
   }
});

I've made a working CodePen for this so you can check out the details: https://codepen.io/vasturiano/pen/BaNrxPq

Let me know if you get it working for your use case. 👍

Hello Vasco

How are you?

A lot thanks really for your important answer.

You could show an example of Nodes with:

*1 - How would Videos and PDF's by Three.js / Aframe?2 - How could the example above be with the use of a .JSON to register the names of Videos or PDF's, like their examples on Github, however with these A-Frame's above;3

• How could it be if each click on the last node opens the next link of the next node?*

We will be very grateful if you can give us these 3 Examples and if there is any cost for your important time, please let us know.

Thank you a lot from Brazil for your return.

Em sex., 13 de mar. de 2020 às 16:58, Vasco Asturiano < [email protected]> escreveu:

@mespper https://github.com/mespper thanks for reaching out.

The difference with your example is that it needs to reference local js objects, like the Threejs sprites used to render the images. Therefore you can't purely rely on static html to inject the necessary attributes, you need to do some in JavaScript. Good news is that that's relatively easy, by doing some light DOM manipulation.

For example, if you have declared your A-frame entity DOM node in your scene as:

You can insert attributes dynamically, including your desired nodeThreeObject using JavaScript as:

const fgEl = document.getElementById('fg');

const imgUrl = '';

fgEl.setAttribute('forcegraph', {

nodes: myNodes,

links: myLinks,

nodeThreeObject: node => {

  const imgTexture = new THREE.TextureLoader().load(imgUrl);

  const material = new THREE.SpriteMaterial({ map: imgTexture });

  const sprite = new THREE.Sprite(material);

  sprite.scale.set(12, 12);



  return sprite;

}

});

I've made a working CodePen for this so you can check out the details: https://codepen.io/vasturiano/pen/BaNrxPq

Let me know if you get it working for your use case. 👍

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vasturiano/aframe-forcegraph-component/issues/21#issuecomment-598888680, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOMJV3QEZJYMIY4Q6B2NE3RHKF6FANCNFSM4LFA2JKA .

--

Messias de Paula Pereira Founder Phone: 55 51 9 8358-3093 / 55 51 3597-5835 Address: Avenida Edgar Hoffmeister, 600 sala 207– Zona Industrial Norte Campo Bom, RS - Brasil - CEP: 93700-000

• https://verify.edx.org/cert/d2b9bb99cc5544de9e5761e3a83058bd * http://www.ncsacademy.com/verifycert.cfm?cert=4135977

---

Esta mensagem, incluindo seus eventuais anexos, pode conter informações confidenciais, de uso restrito e/ou legalmente protegidas. Se você não é o destinatário da mesma, não deve encaminhar, divulgar ou tomar qualquer atitude com base nas informações nelas contidas. Solicitamos que a mensagem seja excluída. A Mespper não se responsabiliza por quaisquer idéias ou opiniões aqui expressas que contrariem as políticas e valores da Empresa e/ou dispositivos legais existentes, e agradece sua colaboração.

Ola @mespper!

Those features go a bit outside the scope of aframe-forcegraph-component and fall more in the domain of threejs and a-frame.

But just as general pointers, if you'd like to replace your nodes with video, I'd recommend looking at VideoTexture, and using that in the context of node-three-object.

As for clicking/interaction, in A-frame and VR in general you don't tend to have mouse click events per se, since you're working with VR controllers. If on the other hand you're looking for a desktop version of the library with mouse interaction, I'd suggest looking at 3d-force-graph.

Hello Vasco

Sure, We already know your other works 3d-force-graph https://github.com/vasturiano/3d-force-graph.

Thank you for your recommendations about VideoTexture https://threejs.org/docs/index.html#api/en/textures/VideoTexture from Three.js too.

So, about https://codepen.io/vasturiano/pen/BaNrxPq who is possible, we use .JSON file to take the image from this file?

Really thanks for your help about.

Em seg., 16 de mar. de 2020 às 02:36, Vasco Asturiano < [email protected]> escreveu:

Ola @mespper https://github.com/mespper!

Those features go a bit outside the scope of aframe-forcegraph-component and fall more in the domain of threejs and a-frame.

But just as general pointers, if you'd like to replace your nodes with video, I'd recommend looking at VideoTexture https://threejs.org/docs/index.html#api/en/textures/VideoTexture, and using that in the context of node-three-object.

As for clicking/interaction, in A-frame and VR in general you don't tend to have mouse click events per se, since you're working with VR controllers https://aframe.io/docs/1.0.0/introduction/interactions-and-controllers.html . If on the other hand you're looking for a desktop version of the library with mouse interaction, I'd suggest looking at 3d-force-graph https://github.com/vasturiano/3d-force-graph.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vasturiano/aframe-forcegraph-component/issues/21#issuecomment-599353764, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOMJVY6OOIWASRCZUFOIILRHW3EBANCNFSM4LFA2JKA .

--

Messias de Paula Pereira Founder Phone: 55 51 9 8358-3093 / 55 51 3597-5835 Address: Avenida Edgar Hoffmeister, 600 sala 207– Zona Industrial Norte Campo Bom, RS - Brasil - CEP: 93700-000

• https://verify.edx.org/cert/d2b9bb99cc5544de9e5761e3a83058bd * http://www.ncsacademy.com/verifycert.cfm?cert=4135977

---

Esta mensagem, incluindo seus eventuais anexos, pode conter informações confidenciais, de uso restrito e/ou legalmente protegidas. Se você não é o destinatário da mesma, não deve encaminhar, divulgar ou tomar qualquer atitude com base nas informações nelas contidas. Solicitamos que a mensagem seja excluída. A Mespper não se responsabiliza por quaisquer idéias ou opiniões aqui expressas que contrariem as políticas e valores da Empresa e/ou dispositivos legais existentes, e agradece sua colaboração.

Extracting the data from your JSON structure should be relatively easy. If each node object has a videoUrl attribute for example, you should be able to access it in your nodeThreeObject function as:

nodeThreeObject: node => {
  // your code using using node.videoUrl
}

Hello Vasco

Sorry, for me not relatively easy.

So, give https://mespper.tech/CLIENT/miserables.json

How can this:

• const imgUrl = '//unpkg.com/3d-force-graph/example/img-nodes/imgs/dog.jpg http://unpkg.com/3d-force-graph/example/img-nodes/imgs/dog.jpg';*

be exchanged for:

imgUrl = .jsonUrl('https://mespper.tech/CLIENT/miserables.json https://mespper.tech/CLIENT/miserables.json')

OR

Inside in your sample Code from https://codepen.io/vasturiano/pen/BaNrxPq ?

Again, really thanks for your time.

Em seg., 16 de mar. de 2020 às 13:45, Vasco Asturiano < [email protected]> escreveu:

Extracting the data from your JSON structure should be relatively easy. If each node object has a videoUrl attribute for example, you should be able to access it in your nodeThreeObject function as:

nodeThreeObject: node => { // your code using using node.videoUrl }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vasturiano/aframe-forcegraph-component/issues/21#issuecomment-599640389, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOMJV4XDYT6NTNVAUAIYHTRHZJS5ANCNFSM4LFA2JKA .

--

Messias de Paula Pereira Founder Phone: 55 51 9 8358-3093 / 55 51 3597-5835 Address: Avenida Edgar Hoffmeister, 600 sala 207– Zona Industrial Norte Campo Bom, RS - Brasil - CEP: 93700-000

• https://verify.edx.org/cert/d2b9bb99cc5544de9e5761e3a83058bd * http://www.ncsacademy.com/verifycert.cfm?cert=4135977

---

Esta mensagem, incluindo seus eventuais anexos, pode conter informações confidenciais, de uso restrito e/ou legalmente protegidas. Se você não é o destinatário da mesma, não deve encaminhar, divulgar ou tomar qualquer atitude com base nas informações nelas contidas. Solicitamos que a mensagem seja excluída. A Mespper não se responsabiliza por quaisquer idéias ou opiniões aqui expressas que contrariem as políticas e valores da Empresa e/ou dispositivos legais existentes, e agradece sua colaboração.

@mespper if you have your image URLs in your input data structure (in your case in the id attribute by looking at https://mespper.tech/CLIENT/miserables.json), you can access that URL value in your nodeThreeObject implementation, and use it to build your image Sprite, like so:

nodeThreeObject: node => {
  ...
  const imgUrl = node.id;
  const imgTexture = new THREE.TextureLoader().load(imgUrl);
  ...
}

Great, I think that got it.

With: https://mespper.tech/CLIENT/teste.json

We get: https://mespper.tech/CLIENT/node4.php

Really thanks but, for video and for now, sorry maybe is necessary more information for me, if possible.

How is possible with JSON ( .mp4 URL ) see the same nodes and links?

Sure, the project is a great opportunity for us to China marketing.

Thanks for your time again.

Em qua., 18 de mar. de 2020 às 17:55, Vasco Asturiano < [email protected]> escreveu:

@mespper https://github.com/mespper if you have your image URLs in your input data structure (in your case in the id attribute by looking at https://mespper.tech/CLIENT/miserables.json), you can access that URL value in your nodeThreeObject implementation, and use it to build your image Sprite, like so:

nodeThreeObject: node => { ... const imgUrl = node.id; const imgTexture = new THREE.TextureLoader().load(imgUrl); ... }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vasturiano/aframe-forcegraph-component/issues/21#issuecomment-600853484, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABOMJVYMBT434DSI5VBA6NDRIEYKLANCNFSM4LFA2JKA .

--

Messias de Paula Pereira Founder Phone: 55 51 9 8358-3093 / 55 51 3597-5835 Address: Avenida Edgar Hoffmeister, 600 sala 207– Zona Industrial Norte Campo Bom, RS - Brasil - CEP: 93700-000

• https://verify.edx.org/cert/d2b9bb99cc5544de9e5761e3a83058bd * http://www.ncsacademy.com/verifycert.cfm?cert=4135977

---

Esta mensagem, incluindo seus eventuais anexos, pode conter informações confidenciais, de uso restrito e/ou legalmente protegidas. Se você não é o destinatário da mesma, não deve encaminhar, divulgar ou tomar qualquer atitude com base nas informações nelas contidas. Solicitamos que a mensagem seja excluída. A Mespper não se responsabiliza por quaisquer idéias ou opiniões aqui expressas que contrariem as políticas e valores da Empresa e/ou dispositivos legais existentes, e agradece sua colaboração.