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

【问题标题】：How to tilt a texture on a sphere in Three.js?如何在 Three.js 中倾斜球体上的纹理？
【发布时间】：2015-09-22 06:55:26
【问题描述】：

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

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

【问题讨论】：

标签： three.js textures

【解决方案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

【讨论】：

【解决方案2】：

关于此的精彩教程：http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/

附：小心 - 图像纹理的高度和宽度必须是 2 的幂才能正确平铺。附言本教程包含行星高质量纹理的链接。

【讨论】：

我读了这篇文章，看起来他所做的只是改变rotation.y，它不会改变轴的角度。