0

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

enter image description here

How do I calculate the orbit around the center given an initial position? Thanks!

Bilal
  • 3,191
  • 4
  • 21
  • 49
ewakwwg12
  • 71
  • 7

0 Answers0