如何在Three.js中倾斜球体上的纹理？

Question

自学Three.js，我正在创建一个简单的太阳系模拟器。我已经找到了如何使用rotateOnAxis函数让行星在倾斜轴上旋转。旋转看起来很有趣，因为纹理没有倾斜（即地球以23度倾斜旋转，纹理根本不倾斜）。

有什么方法可以将纹理倾斜23度，以便北极指向一个角度而不是直线向上？

Answer 1

如果要在轴上旋转行星，可以使用如下图案：

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

然后，在渲染循环中，

mesh.rotateY( 0.01 ); // rotate mesh around its local Y-axis

如果你的星球有纹理，一切都应该像预期的那样。

three.js r.71

Answer 2

创建有关此内容的教程：http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/

P.S。注意 - 图像纹理必须是高度和宽度为2的幂才能正确平铺。 P.P.S.本教程包含指向行星高质量纹理的链接。