three.js pov相机看看周围的bug

Question

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

我修改了它的代码以适应我的需要(鼠标点击移动视图等)我差点完成但是仍然存在一个错误:当我第一次移动相机时,它不会从对象的位置开始移动我正在寻找在现场加载.

这只发生在我设置相机位置时.否则,它几乎可以正常工作,你可以在这个链接上看到:http://jsfiddle.net/42qeojs0/

只需取消注释这三行(在第60行之后)

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

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

提前致谢

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

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