To teach myself Three.js, I am creating a simple solar system simulator. I have figured out how to get the planets to rotate on tilted axes using the rotateOnAxis function. The rotation looks funny though because the textures aren't tilted (i.e. Earth rotating on a 23 degree tilt, texture not tilted at all).
Is there any way I can tilt the texture 23 degrees so that the North Pole is pointing at an angle rather than straight up?
If you want to rotate your planet on an axis, you can use a pattern like this one:
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
mesh.add( new THREE.AxisHelper( 10 ) ); // to show the local coordinate system
mesh.rotation.set( 0, 0, - Math.PI * 23 / 180 ); // tilt
Then, in your render loop,
mesh.rotateY( 0.01 ); // rotate mesh around its local Y-axis
If your planet is textured, everything should look as expected.
three.js r.71
Greate tutorial about this: http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/
P.S. Be careful - the image texture must be a power of two in height and width to tiled correctly. P.P.S. This tutorial contains links to high-quality texture of the planets.
