Three.js:相机在球体周围飞舞？

Question

在Three.js(使用JavaScript/WebGL)中,如何创建一个在固定高度,固定前进速度和相对于球体固定方向的球体周围飞行的相机,用户只能左转和对？

想象一架飞机在地球中心的一条看不见的绳子上飞行,在地面附近飞行并始终看到球体的一部分:

(我目前有代码可以将球体旋转到摄像机看起来它正在飞行 - 左右转向尚未实现 - 但我想在我走得更远之前移动相机/飞机可能更干净,而不是球体组.)

谢谢!

Answer 1

你的意思是在我的Ludum Dare 23游戏中？我发现这比我想象的要复杂一点.不过,这并不困难.

在这里,我假设您知道相机的纬度和经度及其距球体中心的距离(称为radius),并且想要为相机创建变换矩阵.

仅创建以下对象一次,以避免在游戏循环中创建新对象:

var rotationY = new Matrix4();
var rotationX = new Matrix4();
var translation = new Matrix4();
var matrix = new Matrix4();

然后每次相机移动时,按如下方式创建矩阵:

rotationY.setRotationY(longitude);
rotationX.setRotationX(-latitude);
translation.setTranslation(0, 0, radius);
matrix.multiply(rotationY, rotationX).multiplySelf(translation);

在此之后只需设置相机矩阵(假设相机是您的相机对象):

// Clear the camera matrix.
// Strangely, Object3D doesn't have a way to just SET the matrix(?)
camera.matrix.identity();
camera.applyMatrix(matrix);