I have a sphere with an earth texture on it using three.js. The earth rotates horizontally on its own y-axis, but I'm looking to rotate the sphere vertically on its x-axis based on mouse position. When the mouse is at the top of the browser window, the north pole should be visible, and when at the bottom, the south pole. The rotation between the poles should change based on the vertical mouse movement within the window.
How can I achieve this type of rotation?
The following code sets up the three.js scene, however, the rotation math needs refinement:
<html>
<head>
<title>Earth Rotation</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.SphereGeometry(1, 100, 100);
var material = new THREE.MeshPhongMaterial();
var earthMesh = new THREE.Mesh(geometry, material);
material.map = THREE.ImageUtils.loadTexture('images/earth.jpg');
var light = new THREE.AmbientLight( 0xcccccc );
scene.add(light);
scene.add(earthMesh);
camera.position.z = 1.5;
document.addEventListener('mousemove', function(event){
if(event.clientY < window.innerHeight / 2) {
earthMesh.rotation.x = ((window.innerHeight / 2) - (event.clientY * .0001));
} else if(event.clientY > window.innerHeight / 2) {
earthMesh.rotation.x = ((window.innerHeight / 2) + (event.clientY * .0001));
}
}, false)
var animate = function () {
requestAnimationFrame( animate );
earthMesh.rotation.y -= 0.0005;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>