CODEWITHSUNDEEP
three.jstextures
rstumbaugh
rstumbaugh

Reputation: 192

How to tilt a texture on a sphere in Three.js?

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?

Upvotes: 0

Views: 712

Answers (2)

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 1

stdob--
stdob--

Reputation: 29172

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.

Upvotes: 0

Related Questions