I am using React Three Fiber and trying to figure out how I can do a moon orbiting around the earth animation
const MoonGeometry = () => {
const [colorMap] = useLoader(TextureLoader, [MoonMap])
const meshRef = useRef()
const initialPosition = new THREE.Vector3(0, 0, -30);
useFrame(({clock}) => {
const clock2 = clock.getElapsedTime()
meshRef.current.rotation.y -= 0.001;
// meshRef.current.position.y += 30 * Math.cos(clock2);
meshRef.current.position.x += Math.cos(clock2) ;
meshRef.current.position.z += Math.sin(clock2) ;
})
return (
<>
<mesh position={[0, 0, -30]} scale={0.5} ref={meshRef}>
<sphereGeometry args={[15, 32, 16]} />
<meshStandardMaterial map={colorMap} metalness={0.7} roughness={0.6}/>
</mesh>
</>
)
}
export default MoonGeometry
The moon's initial position is [0,0 -30] and I am trying to get it to orbit around [0,0,0]
The current way it is orbiting around the earth is sort of in the flower of life shape, where the orbit's edge touches the origin and every iteration the orbit is slightly shifted
How do I calculate the orbit around the center given an initial position? Thanks!