React Three Map - v1.0.9
    Preparing search index...
    • Converts geographic coordinates to a 3D position vector relative to an origin point.

      The resulting Vector3Tuple represents the position in meters where:

      • X axis points East (positive longitude direction)
      • Y axis points Up (altitude)
      • Z axis points South (negative latitude direction)

      This function applies Mercator scale correction for improved accuracy at different latitudes.

      Parameters

      • point: Coords

        The geographic coordinates to convert

      • origin: Coords

        The origin coordinates used as the reference point (typically the Canvas position)

      Returns Vector3Tuple

      A Vector3Tuple [x, y, z] representing the 3D position in meters

      This function works well at city-level distances. At country-level distances, scale distortion from the Mercator projection becomes noticeable. For large distances, consider using the Coordinates component instead.

      import { coordsToVector3 } from '@wendylabsinc/react-three-map/maplibre';

      const origin = { latitude: 51.5074, longitude: -0.1278 }; // London
      const point = { latitude: 51.5080, longitude: -0.1270, altitude: 50 };

      const position = coordsToVector3(point, origin);
      // Returns approximately [55.6, 50, -66.7] (meters from origin)

      // Use in a component
      <mesh position={position}>
      <sphereGeometry args={[10]} />
      </mesh>