three.js pov 相机环顾四周的错误

Posted 2023-02-27

【中文标题】three.js pov 相机环顾四周的错误

【英文标题】：three.js pov camera look around bug

【发布时间】：2015-07-09 21:16:45

【问题描述】：

我使用 three.js 创建了一个基本场景。我的目标是基于 FirstPersonControls.js 制作一个 pov 相机

我修改了它的代码以满足我的需要（通过鼠标点击移动视图等）我几乎完成了，但仍然存在一个错误：当我第一次移动相机时，它不会从对象的位置开始移动我正在查看场景负载。

这只发生在我设置相机的位置时。否则，它几乎可以工作，正如您在此链接中看到的那样：http://jsfiddle.net/42qeojs0/

只需取消注释这 3 行（第 60 行之后）

    camera.position.x = 10;
    camera.position.y = 10;
    camera.position.z = 250;

然后，尝试通过拖动鼠标在对象周围移动视图。您会看到拖动的开始位置与您第一次看到的位置不同。

提前致谢

【参考方案1】：

修正单击鼠标时出现的初始跳跃。引入一个新变量 dist 来表示您正在查看的对象的距离，并使用 atan2 作为获取经度的更可靠方法。

dist = Math.hypot(blue1.position.x,blue1.position.y,blue1.position.z);
phi = Math.acos(blue1.position.y/dist);

theta = Math.atan2(blue1.position.z,blue1.position.x);

lon = THREE.Math.radToDeg(theta);
lat = 90-THREE.Math.radToDeg(phi);

在onDocumentMouseMove中使用

camera.target.x = dist * Math.sin( phi ) * Math.cos( theta );
camera.target.y = dist * Math.cos( phi );
camera.target.z = dist * Math.sin( phi ) * Math.sin( theta );

这样，如果您获取初始位置，计算 lat、long 和 dist，然后计算查看向量，您就会得到开始的结果。使用 500 的固定倍数实际上会突然跳到比您开始时更远的位置。 （注意 IE 不支持 Math.Hypot，因此如果针对 IE，您可能需要自己计算）。

【讨论】：

我用你的代码更新了 jsfiddle：jsfiddle.net/42qeojs0/3 初始跳转现在已修复，但正如你在第 124 行看到的那样，移动很困难，尤其是当你尝试从右上角跳转时用你的鼠标。第 129 行及以下修复它，但重新启用初始跳转。听起来我们应该混合两种代码，但不知道如何。谢谢