Three.js - 广告牌效果，在摄像机平移后保持方向

Question

我有一个始终设置为面向相机的平面几何体：

plane.lookAt(camera.position);

在更新循环中。 我正在使用OrbitControls来控制相机。 旋转或缩放场景时，平面将继续按预期面向摄像机。

但是，在平移场景后，当飞机继续面向摄像机时，旋转摄像机似乎也会旋转平面，因此，例如，如果平面包含文本，文本可能会显示为旋转或甚至颠倒到观众。

怎么能迫使飞机与相机保持对齐？

jsFiddle的例子： http ： //jsfiddle.net/Stemkoski/ptVLD/

Answer 1

最简单的解决方案是将其添加到动画循环中：

plane.quaternion.copy( camera.quaternion );

更新小提琴： http ： //jsfiddle.net/ptVLD/15/

或者，您可以使用THREE.Sprite

编辑：更新为three.js r.67

Answer 2

不知何故，只是发布在StackOverflow似乎组织和澄清我的想法:)

一个更好的解决方案（更强大的广告牌）似乎是：

plane.rotation.setFromRotationMatrix( camera.matrix );

问题中的jsFiddle代码链接已相应更新; 然而，现在在平移后旋转相机时，相机/飞机有一些“颤抖”，所以我怀疑这个解决方案仍然不理想，我很乐意欣赏并接受一个改进这个问题的答案。

Answer 3

“颤抖”是由于您没有将相机位置用于此新帧而引起的。 您可以根据之前的摄像机位置更新plane ，然后根据控件更新摄像机。

function animate() {
    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

如果你交换这两个操作，你根本就没有“颤抖”

function animate() {
    controls.update();

    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}