Comments (4)
@slechanii have you considered using Sprites? The very definition of a Sprite is a (planar) object that always faces the camera POV, which sounds like what you're seeking.
from 3d-force-graph-vr.
@slechanii have you considered using Sprites? The very definition of a Sprite is a (planar) object that always faces the camera POV, which sounds like what you're seeking.
Thanks for answering quickly!
I was indeed using sprites before and it did the job well, the problem is that from I what I saw, using sprites makes it impossible to use hover / onclick events due to a bug with aframe (gathered from past issues and having problems making it work, might have been fixed ?)
If it hasn't been fixed it means that I can't use sprites as I need hover & onclick on nodes for what i'm trying to achieve.
If sprites are not usable do you have an idea on how I could make the nodes always look at the camera ?
Currently I'm facing 2 issues :
- I can get a camera (explained in my 1st post) but this camera's position vector is always stuck at (0,0,0) no matter what I do strangely (am I doing it wrong ?)
- Even If I were to get the camera and the position vector right, the NodeThreeObject function seems to only be called on rerenders, so I would only be able to make the nodes look at the camera when a rerender is called
Thanks for your help!
from 3d-force-graph-vr.
@slechanii the reason behind the Sprite issue in Aframe is mentioned here: #31 (comment)
That issue eventually originates in the Aframe module, so there's not a whole lot that can be done to work around it.
Similarly, I'm also not sure how easy it would be to implement Sprite-like behaviour without using actual Sprite objects.
from 3d-force-graph-vr.
I also encountered this problem and wrote a component to deal with it. Essentially what this does is to wrap each node in an A-Frame <a-sphere>
, which makes dealing with them much more tractable. The code below also attaches a <a-text>
entity to each sphere, and makes them always look towards the camera.
/* helper for vasturiano/3d-force-graph-vr
* draw a sphere around each force graph node, to make it easy to point to them with the ray caster,
* and attach a text label (which rotates to always face the camera)
* after the graph has been created, use something like
* fgEl.setAttribute('spherize', {})
* to create the spheres
*/
AFRAME.registerComponent('spherize', {
schema: {},
dependencies: ['forcegraph'],
init: function () {
// spheres are cached here and re-used
this.spheres = new Map()
},
tick: function (time, timeDelta) {
document
.querySelector('[forcegraph]')
.components.forcegraph.forceGraph.children.forEach((child) => {
if (child.type == 'Mesh' && child.__data.id) {
let sphereEl = this.spheres.get(child.__data.id)
if (sphereEl) {
// reuse existing sphere and label, but change its position
sphereEl.object3D.position.copy(child.position)
} else {
sphereEl = document.createElement('a-sphere')
sphereEl.classList.add('node')
sphereEl.id = child.__data.id
this.spheres.set(child.__data.id, sphereEl)
sphereEl.setAttribute('position', child.position)
let radius = child.geometry.parameters.radius + 0.1
sphereEl.setAttribute('radius', radius)
let color = child.__data.color || 'white'
let compColor = lightOrDark(standardize_color(color)) == 'light' ? 'black' : 'white'
sphereEl.setAttribute('color', color)
this.el.appendChild(sphereEl)
let label = document.createElement('a-entity')
label.setAttribute('text', {
value: splitText(child.__data.label, 9),
color: compColor,
width: 5 * radius,
align: 'center',
})
sphereEl.setAttribute('look-at', '#cameraRig')
label.setAttribute('position', {x: 0, y: 0, z: radius})
sphereEl.appendChild(label)
}
}
})
},
})
(the line let compColor = lightOrDark(standardize_color(color)) == 'light' ? 'black' : 'white'
sets compColor
to white or black depending on which gives a better contrast with the colour of the sphere)
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 ?
- 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.