定位threejs对象的子对象,以便即使在摄像机移动和旋转时,它也始终位于另一个对象之上

时间:2018-08-26 03:22:42

标签: javascript three.js

在我的场景中,我有一些文本标签出现在对象上方。为此,我将文本标签对象添加到父对象,并将其位置设置为(0, 1, 0)

我希望从观看者的角度来看,即使相机移动和旋转,文本标签也始终与对象具有相同的表观关系。

我尝试过:

  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)

  })

在我的渲染函数中(文本对象是LOD对象的级别),但是它似乎不起作用,可能是因为我不太了解threejs中的相对坐标系。

有人可以帮忙吗?谢谢!

编辑:

此代码将对象放在正确的位置开始

  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))
  })

但是一旦我改变了相机的目标,它就会停止正常工作。

0 个答案:

没有答案