How to make the nodes look at the camera at all times without calling refresh ?

[slechanii]

Hi, i'm trying to make all my nodes (3D meshes) look at the camera position at all times, I am getting the camera position and making the mesh look at its position whenever its rendered the problem is that it only gets executed when nodeThreeObject is called, is there a way for me to make the nodes look at the camera at all times despite not getting rerendered ?

EDIT : After running some tests I found out that while I'm getting a camera, the vector is always (0,0,0) (even atfer moving the camera and triggering a rerender), here is the code I'm using to get the camera and print the position vector inside the nodeThreeObject :

  let cameraEl = document.querySelector("a-entity[camera]");
    if (!cameraEl) {
      cameraEl = document.querySelector("a-camera");
    }
    let camera = cameraEl.components.camera.camera;
    console.log(camera.position) // Always 0,0,0

Thanks.

[vasturiano]

@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.

[slechanii]

@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 :

1. 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 ?)
2. 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!

[vasturiano]

@slechanii the reason behind the Sprite issue in Aframe is mentioned here: https://github.com/vasturiano/3d-force-graph-vr/issues/31#issuecomment-1043570188

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.

[micrology]

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)