react-babylon-map 0.0.1

package/src/api/canvas-props.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { Coords } from './coords';
+
+export interface CanvasProps extends Coords, PropsWithChildren {
+  id?: string;
+  beforeId?: string;
+  frameloop?: 'always' | 'demand';
+  /** render on a separated `<canvas>` that sits on top of the map provider */
+  overlay?: boolean;
+}

package/src/api/coordinates.tsx

@@ -0,0 +1,83 @@
+import { Color4, FreeCamera, HemisphericLight, Scene, Vector3 } from '@babylonjs/core';
+import { memo, useEffect, useRef, useState } from 'react';
+import { syncCamera } from '../core/sync-camera';
+import { useCoordsToMatrix } from '../core/use-coords-to-matrix';
+import { useBabylonMap, BabylonMapContext } from '../core/use-babylon-map';
+import type { BabylonMap } from '../core/use-babylon-map';
+
+export interface CoordinatesProps {
+  longitude: number;
+  latitude: number;
+  altitude?: number;
+  children?: React.ReactNode;
+}
+
+/**
+ * Place 3D content at specific geographic coordinates inside a `<Canvas>`.
+ * Creates a sub-scene with its own camera synced to the given geo position,
+ * mirroring react-three-map's createPortal approach.
+ */
+export const Coordinates = memo<CoordinatesProps>(({
+  latitude, longitude, altitude = 0, children,
+}) => {
+  const babylonMap = useBabylonMap();
+  const origin = useCoordsToMatrix({
+    latitude, longitude, altitude, fromLngLat: babylonMap.fromLngLat,
+  });
+
+  // Create a sub-scene for this coordinate portal
+  const [subScene] = useState(() => {
+    if (!babylonMap.engine) return null;
+    const sub = new Scene(babylonMap.engine);
+    sub.autoClear = false;
+    sub.clearColor = new Color4(0, 0, 0, 0);
+    return sub;
+  });
+
+  const cameraRef = useRef<FreeCamera | null>(null);
+
+  // Create camera + default light in sub-scene
+  useEffect(() => {
+    if (!subScene) return;
+    const cam = new FreeCamera('coordsCam', Vector3.Zero(), subScene);
+    cam.inputs.clear();
+    cam.minZ = 0;
+    cameraRef.current = cam;
+
+    // Add a default light so StandardMaterial isn't black
+    const light = new HemisphericLight('coordsLight', new Vector3(0, 1, 0), subScene);
+    light.intensity = 1;
+
+    return () => { cam.dispose(); light.dispose(); };
+  }, [subScene]);
+
+  // Render the sub-scene each frame, synced to its geographic position
+  useEffect(() => {
+    if (!subScene || !babylonMap.scene) return;
+    const mainScene = babylonMap.scene;
+
+    const observer = mainScene.onBeforeRenderObservable.add(() => {
+      if (!cameraRef.current) return;
+      syncCamera(cameraRef.current, origin, babylonMap.viewProjMx);
+      babylonMap.engine?.wipeCaches(true);
+      subScene.render(false);
+    });
+
+    return () => {
+      mainScene.onBeforeRenderObservable.remove(observer);
+    };
+  }, [subScene, babylonMap.scene, origin, babylonMap]);
+
+  // Provide child context pointing at the sub-scene
+  const childMap: BabylonMap = {
+    ...babylonMap,
+    scene: subScene || undefined,
+  };
+
+  return (
+    <BabylonMapContext.Provider value={childMap}>
+      {children}
+    </BabylonMapContext.Provider>
+  );
+});
+Coordinates.displayName = 'Coordinates';

package/src/api/coords-to-vector-3.ts

@@ -0,0 +1,39 @@
+import { earthRadius } from '../core/earth-radius';
+import { Coords } from './coords';
+
+const DEG2RAD = Math.PI / 180;
+
+const mercatorScaleLookup: { [key: number]: number } = {};
+
+function getMercatorScale(lat: number): number {
+  const index = Math.round(lat * 1000);
+  if (mercatorScaleLookup[index] === undefined) {
+    mercatorScaleLookup[index] = 1 / Math.cos(lat * DEG2RAD);
+  }
+  return mercatorScaleLookup[index];
+}
+
+export function averageMercatorScale(originLat: number, pointLat: number, steps = 10): number {
+  let totalScale = 0;
+  const latStep = (pointLat - originLat) / steps;
+  for (let i = 0; i <= steps; i++) {
+    const lat = originLat + latStep * i;
+    totalScale += getMercatorScale(lat);
+  }
+  return totalScale / (steps + 1);
+}
+
+export function coordsToVector3(point: Coords, origin: Coords): [number, number, number] {
+  const latitudeDiff = (point.latitude - origin.latitude) * DEG2RAD;
+  const longitudeDiff = (point.longitude - origin.longitude) * DEG2RAD;
+  const altitudeDiff = (point.altitude || 0) - (origin.altitude || 0);
+
+  const x = longitudeDiff * earthRadius * Math.cos(origin.latitude * DEG2RAD);
+  const y = altitudeDiff;
+
+  const steps = Math.ceil(Math.abs(point.latitude - origin.latitude)) * 100 + 1;
+  const avgScale = averageMercatorScale(origin.latitude, point.latitude, steps);
+
+  const z = ((-latitudeDiff * earthRadius) / getMercatorScale(origin.latitude)) * avgScale;
+  return [x, y, z];
+}

package/src/api/coords.tsx

@@ -0,0 +1,6 @@
+
+export interface Coords {
+  longitude: number;
+  latitude: number;
+  altitude?: number;
+}

package/src/api/index.ts

@@ -0,0 +1,7 @@
+export * from './canvas-props';
+export * from './coordinates';
+export * from './coords';
+export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';
+export { useBabylonMap, BabylonMapContext } from '../core/use-babylon-map';

package/src/api/near-coordinates.tsx

@@ -0,0 +1,87 @@
+import { Color4, FreeCamera, HemisphericLight, Scene, Vector3 } from '@babylonjs/core';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useBabylonMap, BabylonMapContext } from '../core/use-babylon-map';
+import type { BabylonMap } from '../core/use-babylon-map';
+import { useCoords } from '../core/use-coords';
+import { coordsToVector3 } from './coords-to-vector-3';
+
+export interface NearCoordinatesProps {
+  longitude: number;
+  latitude: number;
+  altitude?: number;
+  children?: React.ReactNode;
+}
+
+/**
+ * Place 3D content at a nearby coordinate (relative to the Canvas origin).
+ * Uses the sub-scene approach like Coordinates but computes a relative offset
+ * for the camera's world matrix.
+ */
+export const NearCoordinates = memo<NearCoordinatesProps>(({ children, ...coords }) => {
+  const { latitude, longitude, altitude } = useCoords();
+  const babylonMap = useBabylonMap();
+
+  const pos = coordsToVector3(coords, { latitude, longitude, altitude });
+
+  // Create a sub-scene for this coordinate portal
+  const [subScene] = useState(() => {
+    if (!babylonMap.engine) return null;
+    const sub = new Scene(babylonMap.engine);
+    sub.autoClear = false;
+    sub.clearColor = new Color4(0, 0, 0, 0);
+    return sub;
+  });
+
+  const cameraRef = useRef<FreeCamera | null>(null);
+
+  // Create camera + default light in sub-scene
+  useEffect(() => {
+    if (!subScene) return;
+    const cam = new FreeCamera('nearCoordsCam', new Vector3(pos[0], pos[1], pos[2]), subScene);
+    cam.inputs.clear();
+    cam.minZ = 0;
+    cameraRef.current = cam;
+
+    const light = new HemisphericLight('nearCoordsLight', new Vector3(0, 1, 0), subScene);
+    light.intensity = 1;
+
+    return () => { cam.dispose(); light.dispose(); };
+  }, [subScene]);
+
+  // Update camera position when offset changes
+  useEffect(() => {
+    if (!cameraRef.current) return;
+    cameraRef.current.position.set(pos[0], pos[1], pos[2]);
+  }, [pos]);
+
+  // Render the sub-scene each frame
+  useEffect(() => {
+    if (!subScene || !babylonMap.scene) return;
+    const mainScene = babylonMap.scene;
+
+    const observer = mainScene.onBeforeRenderObservable.add(() => {
+      if (!cameraRef.current) return;
+      // Use the same projection as the main scene but offset by local position
+      cameraRef.current.freezeProjectionMatrix(babylonMap.scene!.activeCamera!.getProjectionMatrix());
+      babylonMap.engine?.wipeCaches(true);
+      subScene.render(false);
+    });
+
+    return () => {
+      mainScene.onBeforeRenderObservable.remove(observer);
+    };
+  }, [subScene, babylonMap.scene, babylonMap]);
+
+  // Provide child context pointing at the sub-scene
+  const childMap: BabylonMap = {
+    ...babylonMap,
+    scene: subScene || undefined,
+  };
+
+  return (
+    <BabylonMapContext.Provider value={childMap}>
+      {children}
+    </BabylonMapContext.Provider>
+  );
+});
+NearCoordinates.displayName = 'NearCoordinates';

package/src/api/use-map.ts

@@ -0,0 +1,8 @@
+import { MapInstance } from '../core/generic-map';
+import { useBabylonMap } from '../core/use-babylon-map';
+
+/** Access the underlying map instance from inside a `<Canvas>`. */
+export const useMap = <T extends MapInstance = MapInstance>(): T => {
+  const ctx = useBabylonMap();
+  return ctx.map as T;
+};

package/src/api/vector-3-to-coords.ts

@@ -0,0 +1,13 @@
+import { earthRadius } from '../core/earth-radius';
+import { Coords } from './coords';
+
+const DEG2RAD = Math.PI / 180;
+const RAD2DEG = 180 / Math.PI;
+
+export function vector3ToCoords(position: [number, number, number], origin: Coords): Coords {
+  const [x, y, z] = position;
+  const latitude = origin.latitude + (-z / earthRadius) * RAD2DEG;
+  const longitude = origin.longitude + (x / earthRadius) * RAD2DEG / Math.cos(origin.latitude * DEG2RAD);
+  const altitude = (origin.altitude || 0) + y;
+  return { latitude, longitude, altitude };
+}

package/src/core/canvas-in-layer/use-canvas-in-layer.tsx

@@ -0,0 +1,27 @@
+import { CanvasProps } from '../../api/canvas-props';
+import { FromLngLat, MapInstance } from '../generic-map';
+import { useCoordsToMatrix } from '../use-coords-to-matrix';
+import { useRender } from './use-render';
+import { useRoot } from './use-root';
+
+/** Get all the properties needed to render as a map `<Layer>` */
+export function useCanvasInLayer(props: CanvasProps, fromLngLat: FromLngLat, map: MapInstance) {
+  const { latitude, longitude, altitude, frameloop } = props;
+
+  const origin = useCoordsToMatrix({
+    latitude, longitude, altitude, fromLngLat,
+  });
+
+  const { onRemove, scene, camera, babylonMap } = useRoot(fromLngLat, map, props);
+
+  const render = useRender({ origin, frameloop, scene, camera, map, babylonMap });
+
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: 'custom' as const,
+    renderingMode: '3d' as const,
+  };
+}

package/src/core/canvas-in-layer/use-render.ts

@@ -0,0 +1,43 @@
+import { FreeCamera, Matrix, Scene } from '@babylonjs/core';
+import { MapInstance } from '../generic-map';
+import { syncCamera } from '../sync-camera';
+import { useFunction } from '../use-function';
+import { BabylonMap } from '../use-babylon-map';
+
+export function useRender({
+  map, origin, scene, camera, frameloop, babylonMap,
+}: {
+  map: MapInstance;
+  origin: Matrix;
+  scene: Scene;
+  camera: FreeCamera;
+  frameloop?: 'always' | 'demand';
+  babylonMap: BabylonMap;
+}) {
+  const render = useFunction((
+    _gl: WebGL2RenderingContext,
+    projViewMx: number[] | { defaultProjectionData: { mainMatrix: Record<string, number> } },
+  ) => {
+    const pVMx = 'defaultProjectionData' in projViewMx
+      ? Object.values(projViewMx.defaultProjectionData.mainMatrix)
+      : projViewMx;
+
+    // Update shared context
+    babylonMap.viewProjMx = pVMx as number[];
+
+    // Sync camera
+    syncCamera(camera, origin, pVMx as number[]);
+
+    // Wipe Babylon's internal GL state caches so the next render
+    // re-applies everything from scratch. This is critical when
+    // sharing a GL context with MapLibre.
+    scene.getEngine().wipeCaches(true);
+
+    // Render the Babylon scene into the shared GL context.
+    scene.render(false);
+
+    if (!frameloop || frameloop === 'always') map.triggerRepaint();
+  });
+
+  return render;
+}

package/src/core/canvas-in-layer/use-root.tsx

@@ -0,0 +1,82 @@
+import { Color4, Engine, FreeCamera, Scene, Vector3 } from '@babylonjs/core';
+import { createRoot, Root } from 'react-dom/client';
+import { useEffect, useState } from 'react';
+import { CanvasProps } from '../../api/canvas-props';
+import { BabylonMap, BabylonMapContext, createBabylonMap } from '../use-babylon-map';
+import { FromLngLat, MapInstance } from '../generic-map';
+import { useFunction } from '../use-function';
+
+interface RootState {
+  engine: Engine;
+  scene: Scene;
+  camera: FreeCamera;
+  reactRoot: Root;
+  container: HTMLDivElement;
+  babylonMap: BabylonMap;
+}
+
+export function useRoot(
+  fromLngLat: FromLngLat,
+  map: MapInstance,
+  { longitude, latitude, altitude, frameloop, ...props }: CanvasProps,
+) {
+  const [{ engine, scene, camera, reactRoot, babylonMap }] = useState<RootState>(() => {
+    const canvas = map.getCanvas();
+    const gl = (canvas.getContext('webgl2') || canvas.getContext('webgl')) as WebGLRenderingContext;
+
+    // Create Babylon Engine from MapLibre's GL context (same pattern as demo.html)
+    const engine = new Engine(
+      gl as WebGL2RenderingContext,
+      true,
+      { useHighPrecisionMatrix: true },
+      true,
+    );
+
+    const scene = new Scene(engine);
+    scene.autoClear = false;
+    scene.clearColor = new Color4(0, 0, 0, 0);
+    scene.detachControl(); // let MapLibre handle pointer events
+
+    const camera = new FreeCamera('cam', Vector3.Zero(), scene);
+    camera.inputs.clear();
+    camera.minZ = 0;
+
+    const babylonMap = createBabylonMap({ map, fromLngLat, engine, scene });
+
+    // Separate React root for children
+    const container = document.createElement('div');
+    const reactRoot = createRoot(container);
+
+    return { engine, scene, camera, reactRoot, container, babylonMap };
+  });
+
+  const onResize = useFunction(() => {
+    engine.resize();
+  });
+
+  const onRemove = useFunction(() => {
+    reactRoot.unmount();
+    scene.dispose();
+    engine.dispose();
+  });
+
+  // Update coords on babylonMap
+  babylonMap.coords = { longitude, latitude, altitude };
+
+  // Resize listener
+  useEffect(() => {
+    map.on('resize', onResize);
+    return () => { map.off('resize', onResize); };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Render children into the separate React root
+  useEffect(() => {
+    reactRoot.render(
+      <BabylonMapContext.Provider value={babylonMap}>
+        {props.children}
+      </BabylonMapContext.Provider>,
+    );
+  }, [props.children]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { onRemove, engine, scene, camera, babylonMap };
+}

package/src/core/canvas-overlay/canvas-portal.tsx

@@ -0,0 +1,98 @@
+import { Color4, Engine, FreeCamera, Scene, Vector3 } from '@babylonjs/core';
+import { memo, useEffect, useRef, useState } from 'react';
+import { CanvasProps } from '../../api/canvas-props';
+import { BabylonMap, BabylonMapContext, createBabylonMap } from '../use-babylon-map';
+import { FromLngLat, MapInstance } from '../generic-map';
+import { useFunction } from '../use-function';
+import { SyncCameraFC } from './sync-camera-fc';
+
+interface CanvasPortalProps extends CanvasProps {
+  setOnRender: (callback: () => (mx: number[]) => void) => void;
+  map: MapInstance;
+  fromLngLat: FromLngLat;
+}
+
+const canvasStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+};
+
+export const CanvasPortal = memo<CanvasPortalProps>(({
+  children, latitude, longitude, altitude,
+  setOnRender, map, fromLngLat,
+}) => {
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const mapCanvas = map.getCanvas();
+
+  const [babylonMap, setBabylonMap] = useState<BabylonMap | null>(null);
+  const [ready, setReady] = useState(false);
+
+  // Create Engine + Scene on mount
+  useEffect(() => {
+    const canvas = canvasRef.current!;
+    const engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, useHighPrecisionMatrix: true });
+    const scene = new Scene(engine);
+    scene.clearColor = new Color4(0, 0, 0, 0);
+
+    const camera = new FreeCamera('cam', Vector3.Zero(), scene);
+    camera.inputs.clear();
+    camera.minZ = 0;
+
+    setBabylonMap(createBabylonMap({ map, fromLngLat, engine, scene }));
+
+    return () => {
+      scene.dispose();
+      engine.dispose();
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Resize handling
+  useEffect(() => {
+    if (!babylonMap?.engine) return;
+    const engine = babylonMap.engine;
+
+    const onResize = () => {
+      const c = canvasRef.current;
+      if (!c) return;
+      c.width = mapCanvas.clientWidth * window.devicePixelRatio;
+      c.height = mapCanvas.clientHeight * window.devicePixelRatio;
+      c.style.width = `${mapCanvas.clientWidth}px`;
+      c.style.height = `${mapCanvas.clientHeight}px`;
+      engine.resize();
+    };
+
+    onResize();
+    map.on('resize', onResize);
+    return () => { map.off('resize', onResize); };
+  }, [babylonMap, map, mapCanvas]);
+
+  const onReady = useFunction(() => {
+    setReady(true);
+  });
+
+  return (
+    <>
+      <canvas ref={canvasRef} style={canvasStyle} />
+      {babylonMap && (
+        <BabylonMapContext.Provider value={babylonMap}>
+          <SyncCameraFC
+            latitude={latitude}
+            longitude={longitude}
+            altitude={altitude}
+            setOnRender={setOnRender}
+            onReady={onReady}
+            map={map}
+            canvasRef={canvasRef}
+          />
+          {ready && children}
+        </BabylonMapContext.Provider>
+      )}
+    </>
+  );
+});
+CanvasPortal.displayName = 'CanvasPortal';

package/src/core/canvas-overlay/init-canvas-fc.tsx

@@ -0,0 +1,45 @@
+import { memo, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { CanvasProps } from '../../api/canvas-props';
+import { FromLngLat, MapInstance } from '../generic-map';
+import { CanvasPortal } from './canvas-portal';
+
+interface InitCanvasFCProps extends CanvasProps {
+  map: MapInstance;
+  setOnRender: (callback: () => (mx: number[]) => void) => void;
+  frameloop?: 'always' | 'demand';
+  fromLngLat: FromLngLat;
+}
+
+export const InitCanvasFC = memo<InitCanvasFCProps>((props) => {
+  const canvas = props.map.getCanvas();
+
+  const [el] = useState(() => {
+    const el = document.createElement('div');
+    el.style.position = 'absolute';
+    el.style.top = '0';
+    el.style.bottom = '0';
+    el.style.left = '0';
+    el.style.right = '0';
+    el.style.pointerEvents = 'none';
+    return el;
+  });
+
+  useEffect(() => {
+    const parent = canvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+    parent.appendChild(el);
+    return () => {
+      parent.removeChild(el);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <>
+      {createPortal(
+        <CanvasPortal {...props} />,
+        el,
+      )}
+    </>
+  );
+});
+InitCanvasFC.displayName = 'InitCanvasFC';

package/src/core/canvas-overlay/render.tsx

@@ -0,0 +1 @@
+export type Render = (gl: WebGLRenderingContext, matrix: number[]) => void;

package/src/core/canvas-overlay/sync-camera-fc.tsx

@@ -0,0 +1,83 @@
+import { FreeCamera } from '@babylonjs/core';
+import { memo, RefObject, useEffect, useRef, useMemo } from 'react';
+import { Coords } from '../../api/coords';
+import { MapInstance } from '../generic-map';
+import { syncCamera } from '../sync-camera';
+import { useCoordsToMatrix } from '../use-coords-to-matrix';
+import { useFunction } from '../use-function';
+import { useBabylonMap } from '../use-babylon-map';
+
+interface SyncCameraFCProps extends Coords {
+  setOnRender?: (callback: () => (mx: number[]) => void) => void;
+  onReady?: () => void;
+  map: MapInstance;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+}
+
+/** React component to sync the Babylon camera with the map provider on each render. */
+export const SyncCameraFC = memo<SyncCameraFCProps>(({
+  latitude, longitude, altitude = 0, setOnRender, onReady, map, canvasRef,
+}) => {
+
+  const mapCanvas = map.getCanvas();
+  const babylonMap = useBabylonMap();
+  const scene = babylonMap.scene!;
+  const engine = babylonMap.engine!;
+
+  const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: babylonMap.fromLngLat });
+
+  const ready = useRef(false);
+
+  const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);
+  const mapPaintRequests = useRef(0);
+  const triggerRepaintOff = useFunction(() => {
+    mapPaintRequests.current++;
+  });
+
+  // Render callback — called by MapLibre on each paint frame
+  const onRender = useFunction((viewProjMx: number[] | { defaultProjectionData: { mainMatrix: Record<string, number> } }) => {
+    map.triggerRepaint = triggerRepaintOff;
+
+    // Resize if needed
+    if (canvasRef.current && engine) {
+      if (canvasRef.current.width !== mapCanvas.width || canvasRef.current.height !== mapCanvas.height) {
+        canvasRef.current.width = mapCanvas.clientWidth * window.devicePixelRatio;
+        canvasRef.current.height = mapCanvas.clientHeight * window.devicePixelRatio;
+        canvasRef.current.style.width = `${mapCanvas.clientWidth}px`;
+        canvasRef.current.style.height = `${mapCanvas.clientHeight}px`;
+        engine.resize();
+      }
+    }
+
+    const pVMx = 'defaultProjectionData' in viewProjMx
+      ? Object.values(viewProjMx.defaultProjectionData.mainMatrix)
+      : viewProjMx;
+    babylonMap.viewProjMx = pVMx as number[];
+
+    // Sync camera
+    syncCamera(scene.activeCamera as FreeCamera, origin, babylonMap.viewProjMx);
+
+    // Wipe caches and render one frame
+    engine.wipeCaches(true);
+    scene.render(false);
+
+    if (!ready.current && onReady) {
+      ready.current = true;
+      onReady();
+    }
+
+    // Restore triggerRepaint for demand-based rendering
+    map.triggerRepaint = triggerRepaint;
+    if (mapPaintRequests.current > 0) {
+      mapPaintRequests.current = 0;
+      map.triggerRepaint();
+    }
+  });
+
+  useEffect(() => {
+    setOnRender && setOnRender(() => onRender);
+  }, [setOnRender, onRender]);
+
+  return null;
+});
+SyncCameraFC.displayName = 'SyncCameraFC';

package/src/core/coords-to-matrix.ts

@@ -0,0 +1,21 @@
+import { Matrix, Quaternion, Vector3 } from '@babylonjs/core';
+import { FromLngLat } from './generic-map';
+import { Coords } from '../api/coords';
+
+/** Calculate Babylon.js Matrix from coordinates.
+ *  Returns a Babylon Matrix (world transform at the given geo coord).
+ *  Matches the pattern from MapLibre + Babylon.js integration demo. */
+export function coordsToMatrix({
+  longitude, latitude, altitude, fromLngLat
+}: Coords & { fromLngLat: FromLngLat }): Matrix {
+  const center = fromLngLat([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+
+  const position = new Vector3(center.x, center.y, center.z || 0);
+  const scaling = new Vector3(scaleUnit, scaleUnit, scaleUnit);
+  // Babylon default: +x east, +y up, +z north
+  // MapLibre default: +x east, -y north, +z up
+  const rotation = Quaternion.FromEulerAngles(Math.PI / 2, 0, 0);
+
+  return Matrix.Compose(scaling, rotation, position);
+}

package/src/core/earth-radius.ts

@@ -0,0 +1 @@
+export const earthRadius = 6371008.8;