Three.js:相机围绕球体飞行? [英] Three.js: Camera flying around sphere?

问题描述

在 Three.js(使用 JavaScript/WebGL)中，如何创建一个以固定高度、固定前进速度和固定方向围绕球体飞行的相机，而用户只能左右转向?

In Three.js (which uses JavaScript/ WebGL), how would one create a camera which flies around a sphere at fixed height, fixed forward speed, and fixed orientation in relation to the sphere, with the user only being able to steer left and right?

想象一架飞机用一根看不见的绳子连接到地球的中心，在靠近地面的地方飞行并且总是能看到球体的一部分:

Imagine an airplane on an invisible string to the center of a globe, flying near ground and always seeing part of the sphere:

(我目前有一些代码可以旋转球体，因此对于相机来说，它看起来像是在飞行——尚未实现左右转向——但我想在我走得更远之前，移动相机/飞机可能会更干净，不是球体组.)

(I currently have code which rotates the sphere so to the camera it looks like it's flying -- left and right steering not implemented yet -- but I figure before I go further it might be cleaner to move the camera/ airplane, not the sphere group.)

谢谢！

推荐答案

你的意思是在我的 Ludum Dare 23 游戏中?我发现这比我预期的要复杂一些.不过这并不难.

You mean like in my Ludum Dare 23 game? I found this to be a bit more complicated than I expected. It's not difficult, though.

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

Here I'm assuming that you know the latitude and longitude of the camera and its distance from the center of the sphere (called radius), and want to create a transformation matrix for the camera.

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

Create the following objects only once to avoid creating new objects in the game loop:

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

然后每次相机移动时，创建矩阵如下:

Then every time the camera moves, create the matrix as follows:

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

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

After this just set the camera matrix (assuming camera is your camera object):

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

这篇关于Three.js:相机围绕球体飞行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！