我有一个简单的 Three.js 场景,我想围绕它移动相机。相机不仅需要能够移动,还需要能够改变某个焦点周围的 Angular 。焦点实际上是相机位置,在渲染时,我实际上只是通过 cameraBuff
平移相机并将其放置在球体上,然后我告诉它看焦点.
在移动相机之前,一切正常,我可以旋转相机等等。但是,一旦我开始移动,似乎有什么东西坏了!在正常 Angular (垂直,0 < x < 180)它只是卡住并且根本不能围绕焦点旋转。一旦我将它向下移动一点,一切都会重新开始工作。详细说明一下,一旦 cameraBuff
点垂直于表面,问题就会发生。
这是我用来围绕焦点旋转 cameraBuff
矢量/点的代码:
//mouse.onDown* things are recorded once the mouse is initially pressed
theta = -((event.clientX - mouse.onDownPosition.x) * 0.5) + mouse.onDownTheta;
phi = ((event.clientY - mouse.onDownPosition.y) * 0.5) + mouse.onDownPhi;
phi = Math.min(180, Math.max(0, phi));
cameraBuff.x = radius * Math.sin(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
cameraBuff.y = radius * Math.sin(phi * Math.PI / 360 );
cameraBuff.z = radius * Math.cos(theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 );
一旦我将 phi = Math.min(180, Math.max(0, phi));
更改为 phi = Math.min(160, Math.max(20, phi ));
,例如,一切正常,但我什至无法让相机垂直于表面,甚至无法降低它。
例如,按下 w 时会发生这种情况:
if (input.w)
{
var speed = [game.direction.x*60, game.direction.z*60];
game.camera.position.x -= speed[0]; //camera.position and focus are basically the same point all the time.
game.focus.x -= speed[0];
game.camera.position.z -= speed[1];
game.focus.z -= speed[1];
}
方向是这样计算的:
var c = Math.sqrt(cameraBuff.x*cameraBuff.x + cameraBuff.z*cameraBuff.z);
var rat = 1/c;
game.direction.x = cameraBuff.x*rat;
game.direction.z = cameraBuff.z*rat;
有人可以解释我的代码有什么问题吗?
最佳答案
3D 相机需要矢量才能知道如何倾斜相机。这通常是向上方向,并且是正 Y 向量。如果相机平行于向上方向,它不知道什么是向上的,所以它会猜测,而且你不能倾斜相机。要让相机倾斜,需要修改向上方向。
我没有用过 Three.js,但我认为你可以使用 camera.up 向量。
您也可以通过将 Angular 限制为 0.1 < x < 179.9 来使其工作
关于javascript - 一旦放置在高 Angular 或低 Angular ,相机就会表现得很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10802634/