Monday, September 17, 2018

Position a child of a threejs object so it is always above another object even as the camera moves and rotates

Leave a Comment

In my scene, I have text labels that appear just above objects. I do this by adding the text label object to the parent object and giving it a position of (0, 1, 0).

I would like the text labels to always have the same apparent relationship to the objects, from the viewer's perspective, even as the camera moves and rotates.

I tried this:

  var new_text_position = window.textPositionVector.clone().applyQuaternion(camera.quaternion)   window.lodObjects.map(obj => {     obj.position.set(new_text_position.x,                      new_text_position.y,                      new_text_position.z)     obj.update(window.camera)    }) 

in my render function (the text objects are levels of LOD objects), but it doesn't seem to be working, probably because I don't really understand the relative coordinate systems in threejs.

Can anyone help? Thanks!

Edit:

This code gets the objects in the right place to start:

  const rotation = new THREE.Vector3(0, 0, 0)   const camera_euler = new THREE.Euler(Math.PI / 2,  0, 0, 'YXZ')    window.camera.quaternion.onChange( () => {     window.camera.getWorldDirection(rotation)     rotation.applyEuler(camera_euler)     window.lodObjects.forEach(obj => obj.position.copy(rotation))   }) 

but as soon as I change the camera's target, it stops working right.

0 Answers

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment