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

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

3 个答案: