Three.js: Camera flying around sphere?

Question

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.) Thanks!

Accepted Answer

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.

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: Camera flying around sphere?

Solution

Problem