I'm working on creating the moon - earth system in Three JS. For this, I want the moon sphere to have a tilt of 6.68 degrees and the earth sphere to be tilted at 23.5 degrees. Despite being new to Three JS, I couldn't find any information in the documentation regarding axis or tilt adjustments. Can someone guide me on how to achieve this?
I attempted using applyMatrix4 but haven't had success.
// 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)
EDIT:
It seems like the following code snippet is working:
new THREE.SphereGeometry(3,32,32).applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, -1 ).normalize(), 6.68 ) ),
However, I am unsure about how to properly select a vector to use with the makeRotationAxis method.