Provide example how to use SVGRenderer

[bostondevin]

Looking for an example using SVGRenderer as an extraRenderer - so I can use an SVG icon as a node. Just including the renderer seems to give an error - how does nodeThreeObject change here? I can't find any examples...

import ForceGraph3D from '3d-force-graph';
import { SVGRenderer, SVGObject } from 'three/examples/jsm/renderers/SVGRenderer';

const Graph = ForceGraph3D({extraRenderers: [ SVGRenderer ]})(graphContainer).graphData(sampleGraphData).nodeThreeObject(node => {

      const nodeSphere = Sphere(7, rgba(0, 0, 0, 0.1));

      const image = Image('https://media.giphy.com/media/lArQw5Z7Ejb0c/source.gif');
      image.scale.set(12, 12);
      nodeSphere.add(image);

      return nodeSphere
});

Uncaught (in promise) TypeError: Cannot read property 'style' of undefined at three-render-objects.module.js:540 at Array.forEach () at Function.init (three-render-objects.module.js:538) at initStatic (kapsule.module.js:103) at Object.comp [as renderObjs] (kapsule.module.js:97) at Function.init (3d-force-graph.module.js:342) at initStatic (kapsule.module.js:103) at comp (kapsule.module.js:97)

[vasturiano]

@bostondevin thanks for reaching out.

It's easier to debug if you make a reproducing example on https://codepen.io/ for instance. But, one issue that I can see already is that you should instantiate your renderer before passing on to the module:

ForceGraph3D({ extraRenderers: [new SVGRenderer()] })

[emirth]

@bostondevin I do not yet have experience with SVGRenderer directly but one possible approach is to load the desired svg files in advance with SVGLoader and reference them as appropriate when it comes time to render each node. I believe SVGLoader suffers from this lack of support for synchronous loading and so accessing SVG data is not as straightforward as one would like, and as one can see from the results, not all SVG attributes are supported. Best of luck.

[Spenhouet]

Is there any solution to this?