Auto rotate WebGL Globe

Question

I'm working with this amazing experiment, WebGL Globe, and it's really awesome.

I've changed some functions to play and adapt them to what I want. One is function render.

ORIGINAL:

function render() {     
    zoom(curZoomSpeed);

    rotation.x += (target.x - rotation.x) * 0.1;
    rotation.y += (target.y - rotation.y) * 0.1;
    distance += (distanceTarget - distance) * 0.3;

    camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
    camera.position.y = distance * Math.sin(rotation.y);
    camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

    camera.lookAt(mesh.position);

    renderer.render(scene, camera);
}

MODIFIED:

function render() {
    var timer = Date.now() * 0.0001;

    zoom(curZoomSpeed);

    rotation.x += (target.x - rotation.x) * 0.1;
    rotation.y += (target.y - rotation.y) * 0.1;
    distance += (distanceTarget - distance) * 0.3;

    camera.position.x = (Math.cos( timer ) *  960);
    camera.position.y = distance * Math.sin(rotation.y);
    camera.position.z = (Math.sin( timer ) *  960) ;

    camera.lookAt( scene.position );

    renderer.render(scene, camera);
}

Now my globe auto-rotate perfectly, but I can't drag the globe and rotate it with my mouse in Axes X and Z, only Y. How can I use this auto-rotate function and don't lose rotation control with the mouse in AXES X and Z?

Answer 1

What you can do is put the code to rotate the globe manually and then put in your additions with some modifications.

function render() {
var timer = Date.now() * 0.0004;

zoom(curZoomSpeed);

rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
distance += (distanceTarget - distance) * 0.3;

camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

camera.position.x = camera.position.x + (Math.cos( timer ) *  500);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = camera.position.z + (Math.sin( timer ) *  500) ;

camera.lookAt( scene.position );

renderer.render(scene, camera);
}

Answer 2

Generally you can apply as many transformations after each other as you want. They are just matrices in the depth which are multiplied in some order.

However, specifically for your case: the semantics of setting camera.position.x/y/z and having a camera.lookAt() afterwards means that this code does not rotate the globe, it is orbiting the camera, around a location where the globe happens to be. Which is a good thing because probably there is a separate location where you could actually rotate the globe, it may be called "model transformation", or something similar.
If the approach itself is suitable for the framework/engine you use, I suggest doing the timed rotation on the model itself, and orbiting the camera could be done with the mouse using the original code snippet (especially since the distance thing is clearly related to the camera).