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

Posted 2023-02-27

【中文标题】Three.js - 广告牌效果，相机平移后保持方向

【英文标题】：Three.js - billboard effect, maintain orientation after camera pans

【发布时间】：2013-11-12 22:06:42

【问题描述】：

我有一个平面几何体，它始终设置为通过以下方式面向相机：

plane.lookAt(camera.position);

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

但是，在平移场景后，当平面继续面向相机时，旋转相机似乎也旋转了平面，因此，例如，如果平面包含文本，则文本可能会出现旋转甚至倒置下到观众。

如何强制飞机与相机保持对齐？

jsFiddle 的示例：http://jsfiddle.net/Stemkoski/ptVLD/

【参考方案1】：

不知何故，只是在 *** 上发帖似乎可以整理和澄清我的想法 :)

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

plane.rotation.setFromRotationMatrix( camera.matrix );

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

【讨论】：

这对我来说非常有效，我没有任何颤抖。谢谢，我试图解决这个问题好几个小时。

【参考方案2】：

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

plane.quaternion.copy( camera.quaternion );

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

或者，您可以使用THREE.Sprite

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

【讨论】：

看r.67，四元数属性不再可写。您现在可以在每一帧中执行plane.setRotationFromQuaternion( camera.quaternion ); 之类的操作。

谢谢@insominx。更新了答案。

【参考方案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);