react-babylon-map 0.0.1

package/stories/src/ifc.stories.tsx

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Mesh, StandardMaterial, Vector3, Color3,
+  HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, TransformNode,
+  VertexData, type Scene,
+} from "@babylonjs/core";
+import { button, folder, useControls } from "leva";
+import { useBabylonMap } from "react-babylon-map";
+import { suspend } from "suspend-react";
+import { StoryMap } from "./story-map";
+import { loadIFC } from "./ifc/ifc-to-babylon";
+import type { MeshData } from "@ifc-lite/geometry";
+import modelUrl from "./ifc/model.ifc?url";
+
+export default { title: "IFC" };
+
+export function Default() {
+  const [path, setPath] = useState(modelUrl);
+
+  const loadIfcClick = useCallback(async () => {
+    try {
+      setPath(await getLocalFileUrl());
+    } catch (error) {
+      console.warn(error);
+    }
+  }, []);
+
+  useControls({
+    "load IFC file": button(() => loadIfcClick()),
+  });
+
+  const { latitude, longitude, position, rotation, scale } = useControls({
+    coords: folder({
+      latitude: { value: 51.508775, pad: 6 },
+      longitude: { value: -0.1261, pad: 6 },
+    }),
+    position: { value: { x: 0, y: 0.32, z: 0 }, step: 1, pad: 2 },
+    rotation: { value: 0, step: 1 },
+    scale: 1,
+  });
+
+  return (
+    <StoryMap
+      latitude={latitude}
+      longitude={longitude}
+      zoom={20}
+      pitch={75}
+      bearing={-45}
+    >
+      <Lights />
+      <IfcModel
+        path={path}
+        position={position}
+        rotation={rotation}
+        scale={scale}
+      />
+    </StoryMap>
+  );
+}
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+
+    const hemi = new HemisphericLight("ambient", new Vector3(0, 1, 0), scene);
+    hemi.intensity = 0.5 * Math.PI;
+
+    const dir = new DirectionalLight(
+      "dir",
+      new Vector3(-2.5, -50, -5).normalize(),
+      scene
+    );
+    dir.intensity = 1.5 * Math.PI;
+    dir.position = new Vector3(2.5, 50, 5);
+
+    const shadowGen = new ShadowGenerator(1024, dir);
+    shadowGen.useBlurExponentialShadowMap = true;
+    shadowGen.blurKernel = 32;
+
+    const p1 = new PointLight("point1", new Vector3(-10, 0, -20), scene);
+    p1.intensity = Math.PI;
+    const p2 = new PointLight("point2", new Vector3(0, -10, 0), scene);
+    p2.intensity = Math.PI;
+
+    return () => {
+      shadowGen.dispose();
+      hemi.dispose();
+      dir.dispose();
+      p1.dispose();
+      p2.dispose();
+    };
+  }, [scene]);
+  return null;
+}
+
+function IfcModel({
+  path,
+  position,
+  rotation,
+  scale,
+}: {
+  path: string;
+  position: { x: number; y: number; z: number };
+  rotation: number;
+  scale: number;
+}) {
+  const { scene } = useBabylonMap();
+  const parentRef = useRef<TransformNode | null>(null);
+
+  const meshDataArray = suspend(() => loadIFC(path), [path]);
+
+  useEffect(() => {
+    if (!scene || meshDataArray.length === 0) return;
+
+    const parent = new TransformNode("ifcParent", scene);
+    parent.rotation.x = -Math.PI / 2;
+    parent.position.set(position.x, position.y, position.z);
+    parent.scaling.setAll(scale);
+    parentRef.current = parent;
+
+    const createdMeshes: Mesh[] = [];
+    const createdMats: StandardMaterial[] = [];
+
+    // Separate opaque / transparent (matching official ifc2bb.ts)
+    const valid = meshDataArray.filter(m => m.positions.length > 0);
+    const opaque = valid.filter(m => m.color[3] >= 1);
+    const transparent = valid.filter(m => m.color[3] < 1);
+
+    if (opaque.length > 0) {
+      const mesh = buildBatchMesh(opaque, scene, false);
+      mesh.parent = parent;
+      createdMeshes.push(mesh);
+      createdMats.push(mesh.material as StandardMaterial);
+    }
+
+    if (transparent.length > 0) {
+      const alphaGroups = new Map<number, MeshData[]>();
+      for (const m of transparent) {
+        const a = Math.round(m.color[3] * 100) / 100;
+        let bucket = alphaGroups.get(a);
+        if (!bucket) { bucket = []; alphaGroups.set(a, bucket); }
+        bucket.push(m);
+      }
+      for (const [, group] of alphaGroups) {
+        const mesh = buildBatchMesh(group, scene, true);
+        mesh.parent = parent;
+        createdMeshes.push(mesh);
+        createdMats.push(mesh.material as StandardMaterial);
+      }
+    }
+
+    const dir = scene.lights.find(l => l.name === "dir");
+    if (dir) {
+      const sg = dir.getShadowGenerator();
+      if (sg) createdMeshes.forEach(m => sg.addShadowCaster(m));
+    }
+
+    return () => {
+      createdMeshes.forEach(m => m.dispose());
+      createdMats.forEach(m => m.dispose());
+      parent.dispose();
+      parentRef.current = null;
+    };
+  }, [scene, meshDataArray]);
+
+  useEffect(() => {
+    const parent = parentRef.current;
+    if (!parent) return;
+    parent.position.set(position.x, position.y, position.z);
+    parent.rotation.y = (rotation * Math.PI) / 180;
+    parent.scaling.setAll(scale);
+  }, [position, rotation, scale]);
+
+  return null;
+}
+
+/**
+ * Merge MeshData into one Babylon Mesh with per-vertex RGB colors.
+ * Y↔Z swap converts IFC Z-up → Babylon Y-up.
+ * Winding reversal compensates for the swap's reflection.
+ * Matches official ifc2bb.ts for color handling.
+ */
+function buildBatchMesh(
+  meshes: MeshData[],
+  scene: Scene,
+  transparent: boolean,
+): Mesh {
+  let totalVerts = 0;
+  let totalIdx = 0;
+  for (const m of meshes) {
+    totalVerts += m.positions.length / 3;
+    totalIdx += m.indices.length;
+  }
+
+  const positions = new Float32Array(totalVerts * 3);
+  const normals = new Float32Array(totalVerts * 3);
+  const colors = new Float32Array(totalVerts * 4);
+  const indices = new Uint32Array(totalIdx);
+
+  let vOff = 0;
+  let iOff = 0;
+
+  for (const m of meshes) {
+    const vc = m.positions.length / 3;
+
+    // Y↔Z swap: IFC Z-up → Babylon Y-up
+    for (let i = 0; i < m.positions.length; i += 3) {
+      positions[vOff * 3 + i]     = m.positions[i];
+      positions[vOff * 3 + i + 1] = m.positions[i + 2];
+      positions[vOff * 3 + i + 2] = m.positions[i + 1];
+    }
+    for (let i = 0; i < m.normals.length; i += 3) {
+      normals[vOff * 3 + i]     = m.normals[i];
+      normals[vOff * 3 + i + 1] = m.normals[i + 2];
+      normals[vOff * 3 + i + 2] = m.normals[i + 1];
+    }
+
+    // Vertex colors: RGB from mesh color, A=1
+    const [r, g, b] = m.color;
+    for (let v = 0; v < vc; v++) {
+      colors[(vOff + v) * 4 + 0] = r;
+      colors[(vOff + v) * 4 + 1] = g;
+      colors[(vOff + v) * 4 + 2] = b;
+      colors[(vOff + v) * 4 + 3] = 1;
+    }
+
+    // Indices with winding reversal to compensate for Y↔Z reflection
+    for (let i = 0; i < m.indices.length; i += 3) {
+      indices[iOff + i]     = m.indices[i] + vOff;
+      indices[iOff + i + 1] = m.indices[i + 2] + vOff;
+      indices[iOff + i + 2] = m.indices[i + 1] + vOff;
+    }
+
+    vOff += vc;
+    iOff += m.indices.length;
+  }
+
+  const mesh = new Mesh("batched", scene);
+  const vd = new VertexData();
+  vd.positions = positions;
+  vd.normals = normals;
+  vd.colors = colors;
+  vd.indices = indices;
+  vd.applyToMesh(mesh);
+
+  const material = new StandardMaterial("batched-mat", scene);
+  material.diffuseColor = new Color3(1, 1, 1);
+  material.specularColor = new Color3(0, 0, 0);
+
+  if (transparent) {
+    material.alpha = meshes[0].color[3];
+    material.backFaceCulling = false;
+  }
+
+  mesh.material = material;
+  mesh.hasVertexAlpha = false;
+
+  return mesh;
+}
+
+async function getLocalFileUrl(): Promise<string> {
+  return new Promise((resolve) => {
+    const onChange = (e: Event) => {
+      if (!(e.target instanceof HTMLInputElement) || !e.target.files) return;
+      const file = e.target.files[0];
+      if (!file) return;
+      resolve(URL.createObjectURL(file));
+    };
+    const input = document.createElement("input");
+    input.type = "file";
+    input.addEventListener("change", onChange);
+    input.accept = ".ifc";
+    input.click();
+  });
+}

package/stories/src/mapbox/story-mapbox.tsx

@@ -0,0 +1,97 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+import { useControls } from 'leva';
+import Mapbox from "mapbox-gl";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { FC, memo } from "react";
+import Map, { Layer } from 'react-map-gl/mapbox';
+import { Canvas } from 'react-babylon-map';
+import { StoryMapProps } from '../story-map';
+
+/** `<Map>` styled for stories */
+export const StoryMapbox: FC<Omit<StoryMapProps, 'maplibreChildren'>> = ({
+  latitude, longitude, canvas, children, mapChildren, mapboxChildren, ...rest
+}) => {
+
+  const { mapboxToken } = useControls({
+    mapboxToken: {
+      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
+      label: 'mapbox token',
+    }
+  })
+
+  const theme = useLadleContext().globalState.theme;
+
+  const mapStyle = theme === ThemeState.Dark
+    ? "mapbox://styles/mapbox/dark-v11"
+    : "mapbox://styles/mapbox/streets-v12";
+
+  Mapbox.accessToken = mapboxToken;
+
+  const { showBuildings3D } = useControls({
+    showBuildings3D: {
+      value: true,
+      label: 'show 3D buildings'
+    }
+  })
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
+    {!!mapboxToken && <Map
+      antialias
+      initialViewState={{ latitude, longitude, ...rest }}
+      maxPitch={rest.pitch ? Math.min(rest.pitch, 85) : undefined}
+      mapStyle={mapStyle}
+      mapboxAccessToken={mapboxToken}
+    >
+      {mapChildren}
+      {mapboxChildren}
+      <Canvas latitude={latitude} longitude={longitude} {...canvas}>
+        {children}
+      </Canvas>
+      {showBuildings3D && <Buildings3D />}
+    </Map>}
+  </div>
+}
+
+const Center: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }}>{children}</div>
+)
+
+const Buildings3D = memo(() => {
+  return <Layer
+    id="3d-buildings"
+    type="fill-extrusion"
+    source="composite"
+    source-layer="building"
+    minzoom={15}
+    filter={['==', 'extrude', 'true']}
+    paint={{
+      "fill-extrusion-color": "#656565",
+      "fill-extrusion-height": [
+        "interpolate",
+        ["linear"],
+        ["zoom"],
+        15,
+        0,
+        15.05,
+        ["get", "height"],
+      ],
+      "fill-extrusion-base": [
+        "interpolate",
+        ["linear"],
+        ["zoom"],
+        15,
+        0,
+        15.05,
+        ["get", "min_height"],
+      ],
+      "fill-extrusion-opacity": 1.0,
+    }} />
+})
+Buildings3D.displayName = 'Buildings3D';

package/stories/src/maplibre/story-maplibre.tsx

@@ -0,0 +1,36 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+import { useControls } from 'leva';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { FC, memo } from "react";
+import Map from 'react-map-gl/maplibre';
+import { Canvas } from 'react-babylon-map/maplibre';
+import { StoryMapProps } from '../story-map';
+
+/** `<Map>` styled for stories */
+export const StoryMaplibre: FC<Omit<StoryMapProps, 'mapboxChildren'>> = ({
+  latitude, longitude, canvas, children, mapChildren, maplibreChildren, ...rest
+}) => {
+
+  const theme = useLadleContext().globalState.theme;
+
+  const mapStyle = theme === ThemeState.Dark
+    ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+    : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    <Map
+      canvasContextAttributes={{
+        antialias: true,
+      }}
+      initialViewState={{ latitude, longitude, ...rest }}
+      maxPitch={rest.pitch ? Math.min(rest.pitch, 85) : undefined}
+      mapStyle={mapStyle}
+    >
+      {mapChildren}
+      {maplibreChildren}
+      <Canvas latitude={latitude} longitude={longitude} {...canvas}>
+        {children}
+      </Canvas>
+    </Map>
+  </div>
+}

package/stories/src/multi-coordinates.stories.tsx

@@ -0,0 +1,115 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import { MeshBuilder, StandardMaterial, Vector3, Color3, HemisphericLight } from '@babylonjs/core';
+import { Coordinates, NearCoordinates, useBabylonMap } from 'react-babylon-map';
+import { levaStore, useControls } from 'leva';
+import { StoryMap } from "./story-map";
+
+enum CoordinatesType {
+  NearCoordinates = 'NearCoordinates',
+  Coordinates = 'Coordinates',
+}
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), scene);
+    light.intensity = 1;
+    return () => { light.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+const MyBox: FC<{ color: string; scale: number; position?: [number, number, number] }> = memo(({ color, scale, position }) => {
+  const { scene } = useBabylonMap();
+  const [hovered, setHovered] = useState(false);
+  const boxRef = useRef<any>(null);
+  const matRef = useRef<any>(null);
+
+  const s = scale * (hovered ? 1.5 : 1);
+  const height = 7;
+
+  useEffect(() => {
+    if (!scene) return;
+    const box = MeshBuilder.CreateBox("myBox", { width: 1, height, depth: 1 }, scene);
+    box.position.y = s * height * 0.5;
+    box.scaling.setAll(s, s, s);
+    if (position) {
+      box.position.x += position[0];
+      box.position.y += position[1];
+      box.position.z += position[2];
+    }
+    boxRef.current = box;
+    const mat = new StandardMaterial(`boxMat-${color}`, scene);
+    mat.diffuseColor = color === 'blue'
+      ? Color3.FromHexString("#0000FF")
+      : color === 'green'
+        ? Color3.FromHexString("#008000")
+        : Color3.FromHexString("#800080");
+    matRef.current = mat;
+    box.material = mat;
+    box.metadata = {
+      onPointerOver: () => setHovered(true),
+      onPointerOut: () => setHovered(false),
+    };
+    return () => { box.dispose(); mat.dispose(); };
+  }, [scene, color, s, position]);
+
+  return null;
+});
+MyBox.displayName = 'MyBox';
+
+const CoordsControl: FC<{ longitude: number; latitude: number; children: React.ReactNode }> = (props) => {
+  const { coords } = useControls({
+    coords: { value: CoordinatesType.Coordinates, options: CoordinatesType }
+  });
+  return (
+    <>
+      {coords === CoordinatesType.Coordinates && <Coordinates {...props}>{props.children}</Coordinates>}
+      {coords === CoordinatesType.NearCoordinates && <NearCoordinates {...props}>{props.children}</NearCoordinates>}
+    </>
+  );
+};
+
+export default { title: 'Multi Coordinates' };
+
+export function Default() {
+  const { blue, green, purple, scale } = useControls({
+    scale: 1,
+    blue: {
+      value: [-0.1261, 51.508775],
+      pad: 6,
+      step: 0.000001,
+    },
+    green: {
+      value: [-0.1261, 51.508775],
+      pad: 6,
+      step: 0.000001,
+    },
+    purple: {
+      value: [-0.1261, 51.508756],
+      pad: 6,
+      step: 0.000001,
+    },
+  });
+
+  useEffect(() => { levaStore.setValueAtPath('overlay', false, true); }, []);
+
+  return (
+    <StoryMap
+      longitude={blue[0]}
+      latitude={blue[1]}
+      zoom={20}
+      pitch={60}
+    >
+      <Lights />
+      <MyBox scale={scale} color="blue" position={[2, 0, 0]} />
+      <CoordsControl longitude={green[0]} latitude={green[1]}>
+        <MyBox scale={scale} color="green" position={[-2, 0, 0]} />
+      </CoordsControl>
+      <CoordsControl longitude={purple[0]} latitude={purple[1]}>
+        <MyBox scale={scale} color="purple" />
+      </CoordsControl>
+    </StoryMap>
+  );
+}

package/stories/src/pivot-controls.stories.tsx

@@ -0,0 +1,148 @@
+import { FC, memo, useEffect, useMemo, useRef, useState } from "react";
+import {
+  MeshBuilder, StandardMaterial, Vector3, Color3, AbstractMesh,
+  HemisphericLight, GizmoManager,
+} from '@babylonjs/core';
+import { useBabylonMap, vector3ToCoords } from 'react-babylon-map';
+import { useControls } from 'leva';
+import { StoryMap } from "./story-map";
+import { Marker as MaplibreMarker } from 'react-map-gl/maplibre';
+import { Marker as MapboxMarker } from 'react-map-gl/mapbox';
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), scene);
+    light.intensity = 1;
+    return () => { light.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+/** Sphere mesh */
+const MySphere: FC<{ position: [number, number, number] }> = memo(({ position }) => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 100 }, scene);
+    sphere.position.set(position[0], position[1], position[2]);
+    const mat = new StandardMaterial('sphereMat', scene);
+    mat.diffuseColor = Color3.FromHexString("#FFA500");
+    mat.emissiveColor = Color3.FromHexString("#FFA500").scale(0.2);
+    sphere.material = mat;
+    return () => { sphere.dispose(); mat.dispose(); };
+  }, [scene, position]);
+  return null;
+});
+MySphere.displayName = 'MySphere';
+
+/** Drag gizmo using Babylon's built-in GizmoManager */
+const DragGizmo: FC<{
+  position: [number, number, number];
+  onDrag: (newPosition: [number, number, number]) => void;
+}> = memo(({ position, onDrag }) => {
+  const { scene, map } = useBabylonMap();
+  const anchorRef = useRef<AbstractMesh | null>(null);
+
+  useEffect(() => {
+    if (!scene || !map) return;
+
+    // Create an invisible anchor mesh at the position
+    const anchor = MeshBuilder.CreateBox('dragAnchor', { size: 0.01 }, scene);
+    anchor.position.set(position[0], position[1], position[2]);
+    anchor.visibility = 0;
+    anchorRef.current = anchor;
+
+    // Setup gizmo manager — only translation on X and Z axes
+    const gizmoManager = new GizmoManager(scene);
+    gizmoManager.positionGizmoEnabled = true;
+    gizmoManager.rotationGizmoEnabled = false;
+    gizmoManager.scaleGizmoEnabled = false;
+    gizmoManager.boundingBoxGizmoEnabled = false;
+
+    // Disable Y-axis drag (keep on ground plane)
+    if (gizmoManager.gizmos.positionGizmo) {
+      gizmoManager.gizmos.positionGizmo.yGizmo.dispose();
+    }
+
+    // Attach to our anchor
+    gizmoManager.attachToMesh(anchor);
+
+    // Disable map panning during drag
+    let wasDragPanEnabled = true;
+    let wasDragRotateEnabled = true;
+
+    gizmoManager.onAttachedToMeshObservable.add(() => {
+      wasDragPanEnabled = map.dragPan.isEnabled();
+      wasDragRotateEnabled = map.dragRotate.isEnabled();
+    });
+
+    // Track position changes
+    const observer = scene.onBeforeRenderObservable.add(() => {
+      if (!anchorRef.current) return;
+      const pos = anchorRef.current.position;
+      onDrag([pos.x, pos.y, pos.z]);
+    });
+
+    return () => {
+      scene.onBeforeRenderObservable.remove(observer);
+      gizmoManager.dispose();
+      anchor.dispose();
+    };
+  }, [scene, map, onDrag]);
+
+  // Update anchor position when prop changes
+  useEffect(() => {
+    if (anchorRef.current) {
+      anchorRef.current.position.set(position[0], position[1], position[2]);
+    }
+  }, [position]);
+
+  return null;
+});
+DragGizmo.displayName = 'DragGizmo';
+
+export default { title: 'Pivot Controls' };
+
+export function Default() {
+  const origin = useControls({
+    latitude: { value: 51, min: -90, max: 90 },
+    longitude: { value: 0, min: -180, max: 180 },
+  });
+
+  const [position, setPosition] = useState<[number, number, number]>([0, 25, 0]);
+  const geoPos = useMemo(() => vector3ToCoords(position, origin), [position, origin]);
+
+  // Reset on origin change
+  useEffect(() => setPosition([0, 25, 0]), [origin.latitude, origin.longitude]);
+
+  return (
+    <StoryMap
+      longitude={origin.longitude}
+      latitude={origin.latitude}
+      zoom={13}
+      pitch={60}
+      maplibreChildren={
+        <MaplibreMarker longitude={geoPos.longitude} latitude={geoPos.latitude}>
+          <div style={{ fontSize: 18 }}>
+            lat: {geoPos.latitude.toFixed(6)}<br />
+            lon: {geoPos.longitude.toFixed(6)}
+          </div>
+        </MaplibreMarker>
+      }
+      mapboxChildren={
+        <MapboxMarker longitude={geoPos.longitude} latitude={geoPos.latitude}>
+          <div style={{ fontSize: 18 }}>
+            lat: {geoPos.latitude.toFixed(6)}<br />
+            lon: {geoPos.longitude.toFixed(6)}
+          </div>
+        </MapboxMarker>
+      }
+    >
+      <Lights />
+      <MySphere position={position} />
+      <DragGizmo position={position} onDrag={setPosition} />
+    </StoryMap>
+  );
+}