Comments (4)
@micrology thanks for reaching out.
The difference in how the node/link labels are shown is different from 3d-force-graph
because in that module the labels are simple absolute positioned div
elements which are floating in front of the canvas, according to the pointers coordinates.
That approach is not possible in the VR/Aframe world because when entering the VR mode only Three objects belonging to the VR scene are actually shown. Any other DOM elements external to the scene, like div
tooltips are excluded. Thus, the approach here is to have a-text tags that are used to display the label/desc content. They are part of the Aframe scene and thus shown in VR mode. These text objects are positioned in the VR coordinate system, not in terms of canvas pixels, therefore they are fixed into position and attached to the camera itself so their location doesn't change, relative to the user's point of view.
However, these labels should be showing both in and out of VR mode. This example has labels associated, and in my case it works in both modes. Could you check that it works the same for you, with labels even after entering VR mode?
from 3d-force-graph-vr.
Thank you for this very helpful explanation.
Although I see the labels before entering VR mode, I don't see then in VR mode. However, this may be because I am using the WebXR API emulator, rather than a real VR headset (an Oculus Quest 2 is on order, but hasn't arrived yet).
I had hoped to get something more like the 3d-force-graph
behaviour, so I experimented with adding a hidden sprite to each node and an onNodeHover
callback function that would reveal the sprite, but got an error: THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites.
when displaying the VR scene so perhaps this is not possible.
from 3d-force-graph-vr.
@micrology the cause of the issue is that Aframe has trouble raycasting against Sprite type objects.
ThreeJS recommends setting the raycaster to support sprites, but this needs to happen inside the Aframe raycaster source code.
Until then there's not a whole lot that can be done to get Sprites to work properly with raycasting (require to detect hover interactions in this module). Sorry about that.
from 3d-force-graph-vr.
related to
aframevr/aframe#5042
aframevr/aframe#5035
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
- 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.