vasturiano
How to access the THREE.js instance used by 3d-force-graph to avoid multiple imports?
I'm using 3d-force-graph with custom node/link labels via three-spritetext, which requires access to the THREE namespace to create sprite objects.
Currently, I'm loading THREE.js separately:
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/3d-force-graph.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/three-spritetext.min.js"></script>
This causes two issues:
- Deprecation warnings (as of THREE.js r150+):
Scripts "build/three.js" and "build/three.min.js" are deprecated with r150+,
and will be removed with r160. Please use ES Modules or alternatives.
- Multiple instances warning:
WARNING: Multiple instances of Three.js being imported.
Question: Is there a way to access the THREE.js instance that 3d-force-graph uses internally, so I can avoid importing it separately? Something like:
const THREE = graph.three(); // or similar?
const sprite = new THREE.SpriteText('Label');
This would eliminate the multiple instances issue and align with THREE.js's move toward ES modules.
Use case: Creating custom three.js objects (sprites, geometries) for nodeThreeObject() and linkThreeObject() customizations.
@namedgraph thanks for reaching out.
Question: Is there a way to access the THREE.js instance that 3d-force-graph uses internally, so I can avoid importing it separately?
Unfortunately that's not possible. Because 3d-force-graph is importing three via ES modules and there's no longer the concept of a "global" THREE object. Everything is segmented into small objects. Additionally, the recent versions of three have deprecated the UMD version as you can see from your first warning, so they also don't provide the option to have THREE as a global variable.
The only thing you can do in your case, is tell 3d-force-graph to consume from your version of THREE if there is one, so the functionality doesn't conflict. For that you just need to "defer" the 3d-force-graph script loading so that by time it imports it already sees that there's a global THREE variable present, and will just consume from that.
<script src="https://unpkg.com/3d-force-graph" defer></script>
It will however not make the 2nd warning disappear, because the ES modules version of three still need to be imported, to be used in case there's no global THREE available. It will just not use it in that circumstance, but still triggers the warning.
In the end it's just a more stable setup to migrate everything to ES modules. That will take care of both warnings.
Hope this makes some sense.
@vasturiano thanks for the reply.
The thing is I'm not even using JS so there's no place really for the import statements :)
I'm using XSLT via SaxonJS 3.