javascript - Three.js getWorldPosition 未返回预期结果

Question

请参阅我在

创建的要点

https://gist.github.com/sparkbuzz/f1f8d0d8bbc7757b679f

它包含一个名为 OrbitControls 的 TypeScript 类。作为学习 3D 和 three.js 的尝试，到目前为止，在 MrDoob's JS OrbitControls. 的指导和启发下，我已经成功创建了轨道风格控件。

我的实现略有不同，但简而言之，我使用 mousedown、mousemove 和 mouseup 事件来导航相机世界起源。当 mousedown 被触发时，我使用以下代码获取相机的初始位置:

this.subjectPositionStart = this.subject.getWorldPosition();

在mousemove期间使用它来计算需要添加到相机初始位置的 Angular ，就像mousedown被触发时一样。

在mousemove期间，theta和phi Angular 是根据鼠标在HTML Canvas 上移动的距离计算的，并用于重新定位相机具有:

this.subject.position.x = rho * Math.cos(theta) * Math.sin(phi);
this.subject.position.y = rho * Math.sin(theta) * Math.sin(phi);
this.subject.position.z = rho * Math.cos(phi);

一切正常，但是，在下一次鼠标按下时，有时，当相机位置绕 z 轴的旋转 Angular 高于 90° 或低于 -90° 时，相机位置捕捉到看起来与应有位置相反的位置。

所以我看到的是相机翻转，以镜像其位置， Angular 是正确的，但只是镜像。

当我不超过 90° 时，下一个 mousedown 工作正常，导航行为符合预期，并且从 getWorldPosition() 正确检索相机位置，但是我怀疑我错误地使用了这个函数，或者可能完全使用了错误的技术来确定相机位置相对于原点的 Angular 。

问题肯定与 mousedown 处理程序有关，因为虽然只有 mousemove 触发，但超过 90° Angular 没有问题，并且导航工作正常。

对可能出现的问题有什么想法吗？

编辑:

我想我就是这样的 calculating baseTheta不正确的是:

var baseTheta:number = Math.asin(this.subjectPositionStart.y / rho / Math.sin(basePhi));

如果我使用:

var baseTheta:number = Math.acos(this.subjectPositionStart.x / rho / Math.sin(basePhi));

我遇到了同样的问题，但它在 180° 和 360° 之间翻转，我认为这是一个线索......

Answer 1

事实证明，baseTheta 和 basePhi 的计算不正确，而且这个问题实际上出现在我提出的另一个问题中。

Calculate θ and ø angles between origin and x,y,z coordinate

在上面链接中 Paul.S 的回答的帮助下，我更改了以下代码:

var basePhi:number = Math.acos(this.subjectPositionStart.z / rho);
var baseTheta:number = Math.asin(this.subjectPositionStart.y / rho / Math.sin(basePhi));

至

var basePhi:number = Math.acos(this.subjectPositionStart.z / rho);
var baseTheta:number = Math.atan2(this.subjectPositionStart.y, this.subjectPositionStart.x);

问题就解决了。不再有翻来覆去的事情了。