Javascript three.js getWorldPosition未返回预期结果

Javascript three.js getWorldPosition未返回预期结果,javascript,3d,three.js,typescript,Javascript,3d,Three.js,Typescript,请参考我在 它包含一个名为OrbitControls的TypeScript类。作为学习3D和3D的一种尝试,到目前为止,我已经成功地创建了轨道样式的控件,并从中获取了引导和分离 我的实现略有不同,但简而言之,我使用mousedown、mousemove和mouseup事件在世界各地导航摄影机。当mousedown被触发时,我使用以下代码获取相机的初始位置: this.subjectPositionStart = this.subject.getWorldPosition(); 在mousem

请参考我在

它包含一个名为OrbitControls的TypeScript类。作为学习3D和3D的一种尝试,到目前为止,我已经成功地创建了轨道样式的控件,并从中获取了引导和分离

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

this.subjectPositionStart = this.subject.getWorldPosition();
在mousemove过程中使用它来计算需要添加到相机初始位置的角度,就像mousedown被触发时一样

在鼠标移动过程中,根据鼠标在HTML画布上移动的距离计算θ和φ角度,并使用以下参数重新定位相机:

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轴的旋转角度超过90°或低于-90°时,相机位置会捕捉到与预期相反的位置

所以我看到的是相机翻转,以镜像其位置,角度是正确的,但只是镜像

当我没有超过90°时,下一个鼠标向下工作正常,导航行为符合预期,并且从getWorldPosition()正确检索相机位置,但我怀疑我没有正确使用此函数,或者完全使用错误的技术来确定相机相对于原点的位置角度

问题肯定与mousedown处理程序有关,因为只有mousemove会启动,但超过90°角没有问题,导航工作正常

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

编辑:

我认为我的方式是不正确的:

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°之间翻转,我想这是一个线索…

你的问题可能与Three.js试图让相机朝上的方式有关

看看这个:

在这种情况下,一个人旋转的方式有一些限制。将这些添加到代码中可能会解决您的问题

        // restrict theta to be between desired limits
        theta = Math.max( this.minAzimuthAngle, Math.min( this.maxAzimuthAngle, theta ) );

        // restrict phi to be between desired limits
        phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) );

        // restrict phi to be betwee EPS and PI-EPS
        phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );
结果是baseTheta和basePhi的计算不正确,而这个问题实际上出现在我问的另一个问题中

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

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


问题解决了。不要再翻来翻去。

我一定会试试这个,但只要我不调用getWorldPosition,例如,在按住鼠标按钮不断拖动鼠标时,这就永远不会是问题。相机按预期运行。仅当调用getWorldPosition重置mousemove的初始位置时,在mousedown事件中,并且当围绕z轴的相机角度>90°或<-90°时,才会出现此问题。我考虑了lookAt()混乱的可能性,但似乎不是这样,但在添加一些调试覆盖数据后,我可以看到,每当X变为负值时,在下一次鼠标向下移动时,计算会导致-以某种方式变为+例如,如果X为-0.5,它将跳到0.5。Y和Z值保持正确,但是…很高兴您能够解决您的问题,并且thx为您提出了解决方案。
var basePhi:number = Math.acos(this.subjectPositionStart.z / rho);
var baseTheta:number = Math.atan2(this.subjectPositionStart.y, this.subjectPositionStart.x);