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