Comments (5)
@ingodahn thanks for reaching out.
I see that you're providing the exact same data object to both of the components. This may be the reason behind the issue, as some conflicts arise due to the same internal Three objects being shared between two different scenes (and using different renderers, webgl and VR).
Could you try the same example but with completely separate dedicated data objects for each. You could try deep cloning one object from the other, or simply re-generate a data object from scratch at import time.
Let me know if that leads to a different result.
from 3d-force-graph-vr.
from 3d-force-graph-vr.
@ingodahn ok thanks for making that new example. 👍
I think I found the resolution to this issue, and it's a weird one. You just need to swap the order of the component imports, so that the import of 3d-force-graph-vr
happens before 3d-force-graph
.
So simply replace this:
import Component1 from "./Component1.vue";
import Component2 from "./Component2.vue";
with this
import Component2 from "./Component2.vue";
import Component1 from "./Component1.vue";
The explanation behind why this works has to do with the way three
declares itself as a global in the system. And to prevent having multiple instances of three
being consumed when importing modules that require it, they first verify if there isn't already one defined in the module, before defining a new one. So, whichever import happens first is essentially defining the version of three
that will be consumed by the other packages in the application.
Then the other element of this is how the VR module actually imports a customly modified/augmented version of three
as it's required by the underlying dependency aframe
. This augmented version has methods which are not present in the vanilla version of three
consumed by 3d-force-graph
. So basically the version imported by 3d-force-graph-vr
can satisfy the requirements of 3d-force-graph
, but not vice-versa. That's why the import of 3d-force-graph-vr
needs to occur first.
from 3d-force-graph-vr.
from 3d-force-graph-vr.
@ingodahn the only part that makes a difference is that the module that imports aframe
, f.e. 3d-force-graph-vr
must always come first.
from 3d-force-graph-vr.
Related Issues (20)
- Graph disappears when in VR mode? HOT 1
- import ForceGraphVR in js module gives multiple instances of Three.js imported and A-frame <script>in head warnings HOT 2
- Adding <!DOCTYPE html> at the top of the source code causes basic example to fail HOT 2
- Nodes names not displayed HOT 4
- Text + Nodes causes errors HOT 1
- Not sure how to add a bg video HOT 4
- Movement doesn't work on Oculus HOT 1
- Differentiating same name nodes HOT 1
- Graph with ~150 nodes and ~300 crashes HOT 2
- How to render an image sprite and display text at the same time ?
- How to make the nodes look at the camera at all times without calling refresh ? HOT 4
- Node Labels not Displayed on Mobile HOT 4
- Background Image option instead of background color HOT 1
- Click to expand / collapse in VR?
- interaction to nodes
- Cannot read properties of undefined (reading 'xr') HOT 1
- Is there a way to render the passthrough background for XR headsets (e.g. Oculus Pro)? HOT 1
- Mobile navigation HOT 1
- Which combination to get started HOT 2
- Re-enable touch screen movement controls? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 3d-force-graph-vr.