如何在Three.js中为球体设置倾斜角度（地月系统场景）

问题描述 #

我想在Three.js中创建地月系统，需要把月球球体设为6.68度倾斜，地球球体设为23.5度倾斜。作为Three.js新手，我在文档里没找到和轴或倾斜相关的内容，试了applyMatrix4但没成功，月球初始化代码如下：

// Moon

const moonTexture = new THREE.TextureLoader().load('moon.jpg')
const normalTexture = new THREE.TextureLoader().load('normal.jpg')

const moon = new THREE.Mesh(
  new THREE.SphereGeometry(3,32,32),
  new THREE.MeshStandardMaterial({
    map: moonTexture,
    normalMap: normalTexture
  })
)
moon.position.x = -10
moon.position.y = 5
moon.position.z = -15
scene.add(moon)

编辑补充：用下面的代码好像有效，但我不确定怎么正确选择makeRotationAxis方法需要的向量：

new THREE.SphereGeometry(3,32,32).applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, - 1 ).normalize(), 6.68 ) ),

解决思路与代码实现 #

先搞懂两个关键坑点：

1. Three.js的旋转方法只认弧度，直接传角度会转得飞起；
2. 旋转轴的向量决定了倾斜的方向，得对应你要模拟的天体姿态。

角度转弧度的正确姿势 #

用Three.js内置的THREE.MathUtils.degToRad()把角度转成弧度，比如23.5度就是THREE.MathUtils.degToRad(23.5)，6.68度同理。

旋转轴怎么选？ #

• 地球的黄赤交角（23.5度倾斜）是绕x轴（对应现实中地球自转轴的方向），所以用new THREE.Vector3(1, 0, 0)就行；
• 月球的6.68度倾斜，如果你是模拟它相对于黄道面的姿态，通常可以绕y轴或者轨道平面的法向量；如果是简化场景，直接用你之前的Vector3(1, 0, -1).normalize()也没问题——这个向量是x-z平面上的对角线方向，你可以根据预览效果调整，比如改成(1,0,0)或者(0,1,0)看哪种更符合你的预期。

推荐的代码写法（新手友好） #

地球倾斜设置

// 地球创建示例
const earthTexture = new THREE.TextureLoader().load('earth.jpg')
const earth = new THREE.Mesh(
  new THREE.SphereGeometry(10, 32, 32),
  new THREE.MeshStandardMaterial({ map: earthTexture })
)
// 直接设置旋转，直观易懂
earth.rotation.x = THREE.MathUtils.degToRad(23.5)
scene.add(earth)

月球倾斜设置（两种方式任选）

方式一：直接给Mesh设置旋转（推荐）

这种方式比操作几何体矩阵更直观，后期调整也方便：

// Moon
const moonTexture = new THREE.TextureLoader().load('moon.jpg')
const normalTexture = new THREE.TextureLoader().load('normal.jpg')

const moon = new THREE.Mesh(
  new THREE.SphereGeometry(3,32,32),
  new THREE.MeshStandardMaterial({
    map: moonTexture,
    normalMap: normalTexture
  })
)
moon.position.set(-10, 5, -15)
// 用轴角方式设置旋转，先转弧度
const moonTiltAxis = new THREE.Vector3(1, 0, -1).normalize()
moon.setRotationFromAxisAngle(moonTiltAxis, THREE.MathUtils.degToRad(6.68))
scene.add(moon)

方式二：给几何体应用矩阵（和你的尝试对齐）

如果你坚持要操作几何体，记得把角度转成弧度：

const moonGeometry = new THREE.SphereGeometry(3,32,32)
// 修正：把6.68度转成弧度
const tiltMatrix = new THREE.Matrix4().makeRotationAxis(
  new THREE.Vector3(1, 0, -1).normalize(),
  THREE.MathUtils.degToRad(6.68)
)
moonGeometry.applyMatrix4(tiltMatrix)

const moon = new THREE.Mesh(
  moonGeometry,
  new THREE.MeshStandardMaterial({
    map: moonTexture,
    normalMap: normalTexture
  })
)
moon.position.set(-10, 5, -15)
scene.add(moon)

小提示 #

如果不确定旋转轴的效果，可以临时把旋转角度调大（比如90度），这样能明显看到倾斜方向，方便你调整向量参数。比如把6.68改成90，看月球会往哪个方向倒，再微调轴的x/y/z值。

内容的提问来源于stack exchange，提问作者ewakwwg12