react-babylon-map 0.0.1

package/stories/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "port": 61000
+}

package/stories/src/adaptive-dpr.tsx

@@ -0,0 +1,34 @@
+import { memo, useEffect, useState } from "react";
+import { useBabylonMap } from 'react-babylon-map';
+
+/**
+ * Adjusts the engine's hardware scaling level based on map movement.
+ * Decreases resolution during map interaction for performance,
+ * restores full resolution when stationary.
+ */
+export const AdaptiveDpr = memo(() => {
+  const { engine, map } = useBabylonMap();
+  const [initialDpr, setInitialDpr] = useState(1);
+
+  useEffect(() => {
+    if (!engine) return;
+    setInitialDpr(engine.getHardwareScalingLevel());
+  }, [engine]);
+
+  useEffect(() => {
+    if (!engine || !map) return;
+
+    const decreaseDpr = () => engine.setHardwareScalingLevel(2);
+    const increaseDpr = () => engine.setHardwareScalingLevel(initialDpr);
+
+    map.on('movestart', decreaseDpr);
+    map.on('moveend', increaseDpr);
+    return () => {
+      map.off('movestart', decreaseDpr);
+      map.off('moveend', increaseDpr);
+    };
+  }, [engine, map, initialDpr]);
+
+  return null;
+});
+AdaptiveDpr.displayName = 'AdaptiveDpr';

package/stories/src/billboard.stories.tsx

@@ -0,0 +1,111 @@
+import { FC, memo, useEffect } from "react";
+import {
+  MeshBuilder, StandardMaterial, DynamicTexture,
+  HemisphericLight, Vector3, Color3, Scene,
+} from '@babylonjs/core';
+import { useBabylonMap } from 'react-babylon-map';
+import { StoryMap } from "./story-map";
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(1, 4.5, 3), scene);
+    light.intensity = Math.PI;
+    light.groundColor = Color3.FromHexString("#60666C");
+    return () => { light.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+/** Cylinder mesh — mirrors drei's <Cylinder> */
+const Cylinder: FC<{ args: [number, number, number]; position: [number, number, number]; color: string }> = memo(({ args, position, color }) => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const [radiusTop, radiusBottom, height] = args;
+    const mesh = MeshBuilder.CreateCylinder('cylinder', {
+      diameterTop: radiusTop * 2,
+      diameterBottom: radiusBottom * 2,
+      height,
+    }, scene);
+    mesh.position.set(position[0], position[1], position[2]);
+    const mat = new StandardMaterial('cylMat', scene);
+    mat.diffuseColor = Color3.FromHexString(color);
+    mat.emissiveColor = Color3.FromHexString(color).scale(0.3);
+    mesh.material = mat;
+    return () => { mesh.dispose(); mat.dispose(); };
+  }, [scene, args, position, color]);
+  return null;
+});
+Cylinder.displayName = 'Cylinder';
+
+/** Creates a plane with dynamic texture text — equivalent to drei's <Text> */
+function createTextPlane(text: string, fontSize: number, color: string, scene: Scene) {
+  // In drei, fontSize is in world units. We render text large in texture and scale plane to match.
+  const textureWidth = 512;
+  const textureHeight = 256;
+  const tex = new DynamicTexture('textTex', { width: textureWidth, height: textureHeight }, scene, true);
+  const ctx = tex.getContext();
+  ctx.clearRect(0, 0, textureWidth, textureHeight);
+  // Fill text large relative to texture, then size plane to world units
+  ctx.font = `bold 200px Arial`;
+  ctx.fillStyle = color;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(text, textureWidth / 2, textureHeight / 2);
+  tex.update();
+
+  // Plane size in world units: fontSize maps to world height
+  const planeWidth = fontSize * (textureWidth / textureHeight);
+  const planeHeight = fontSize;
+  const plane = MeshBuilder.CreatePlane('textPlane', { width: planeWidth, height: planeHeight }, scene);
+  const mat = new StandardMaterial('textMat', scene);
+  mat.diffuseTexture = tex;
+  mat.emissiveTexture = tex;
+  mat.emissiveColor = Color3.White();
+  mat.opacityTexture = tex;
+  mat.backFaceCulling = false;
+  mat.useAlphaFromDiffuseTexture = true;
+  plane.material = mat;
+  return { plane, mat, tex };
+}
+
+/** Text plane that always faces the camera (billboard effect) */
+const BillboardText: FC<{ text: string; fontSize: number; color: string; position: [number, number, number] }> = memo(({ text, fontSize, color, position }) => {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const { plane, mat, tex } = createTextPlane(text, fontSize, color, scene);
+    plane.position.set(position[0], position[1], position[2]);
+
+    // Billboard: face camera each frame by copying inverse camera rotation
+    const observer = scene.onBeforeRenderObservable.add(() => {
+      const cam = scene.activeCamera;
+      if (!cam) return;
+      // Invert camera rotation so the plane faces toward the viewer
+      plane.rotationQuaternion = cam.absoluteRotation.clone().invert();
+    });
+
+    return () => {
+      scene.onBeforeRenderObservable.remove(observer);
+      plane.dispose();
+      tex.dispose();
+      mat.dispose();
+    };
+  }, [scene, text, fontSize, color, position]);
+  return null;
+});
+BillboardText.displayName = 'BillboardText';
+
+export default { title: 'Billboard' };
+
+export function Default() {
+  return (
+    <StoryMap latitude={51} longitude={0} zoom={18} pitch={60}>
+      <Lights />
+      <Cylinder args={[10, 1, 40]} position={[0, 20, 0]} color="#FFFF00" />
+      <BillboardText text="Hi!" fontSize={17} color="#2592a8" position={[0, 50, 0]} />
+    </StoryMap>
+  );
+}

package/stories/src/buildings-3d.stories.tsx

@@ -0,0 +1,280 @@
+import { FC, memo, useEffect, useMemo, useRef } from "react";
+import {
+  Mesh, MeshBuilder, StandardMaterial, Vector3, Color3, VertexData, Scene,
+  HemisphericLight, DirectionalLight, DefaultRenderingPipeline,
+} from "@babylonjs/core";
+import { levaStore, useControls } from "leva";
+import { useBabylonMap, coordsToVector3, Coords } from "react-babylon-map";
+import { StoryMap } from "./story-map";
+import { AdaptiveDpr } from "./adaptive-dpr";
+import { getBuildingsData, OverpassElement } from "./free-3d-buildings/get-buildings-data";
+import { suspend } from "suspend-react";
+
+const coords: Coords = { latitude: 51.5074, longitude: -0.1278 };
+
+function rand(min: number, max: number) {
+  return min + Math.random() * (max - min);
+}
+
+// Light accent colors (HSL ranges for animated buildings)
+const night = new Color3(0, 0, 0.08);
+const day = new Color3(1, 0.5, 0.1);
+
+const _c0 = new Color3();
+const _c1 = new Color3();
+
+function lerpHSL(c0: Color3, c1: Color3, t: number): Color3 {
+  const hsv0 = c0.toHSVToRef(_c0);
+  const hsv1 = c1.toHSVToRef(_c1);
+  const h = hsv0.r + (hsv1.r - hsv0.r) * t;
+  const s = hsv0.g + (hsv1.g - hsv0.g) * t;
+  const v = hsv0.b + (hsv1.b - hsv0.b) * t;
+  return Color3.FromHSV(h, s, v);
+}
+
+interface BuildingAnimData {
+  c0: Color3;
+  c1: Color3;
+  animOffset: number;
+  animSpeed: number;
+  emissiveIntensity: number;
+}
+
+function createBuildingMesh(
+  poly: { lat: number; lon: number }[],
+  origin: Coords,
+  base: number,
+  height: number,
+  scene: Scene,
+  index: number,
+): { ribbon: Mesh; cap: Mesh } | null {
+  if (poly.length < 3) return null;
+
+  const n = poly.length;
+  const positions = poly.map(p =>
+    coordsToVector3({ longitude: p.lon, latitude: p.lat }, origin)
+  );
+
+  // Side walls via ribbon
+  const bottom: Vector3[] = [];
+  const top: Vector3[] = [];
+  for (let i = 0; i < n; i++) {
+    bottom.push(new Vector3(positions[i][0], base, positions[i][2]));
+    top.push(new Vector3(positions[i][0], height, positions[i][2]));
+  }
+  bottom.push(bottom[0].clone());
+  top.push(top[0].clone());
+
+  const ribbon = MeshBuilder.CreateRibbon(`building${index}`, {
+    pathArray: [bottom, top],
+    closePath: true,
+    closeArray: false,
+  }, scene);
+
+  // Top cap with fan triangulation
+  const capPositions: number[] = [];
+  const capIndices: number[] = [];
+  for (let i = 0; i < n; i++) {
+    capPositions.push(positions[i][0], height, positions[i][2]);
+  }
+  // Center vertex
+  let cx = 0, cz = 0;
+  for (const p of positions) { cx += p[0]; cz += p[2]; }
+  cx /= n; cz /= n;
+  capPositions.push(cx, height, cz);
+  const centerIdx = n;
+  for (let i = 0; i < n; i++) {
+    const next = (i + 1) % n;
+    capIndices.push(centerIdx, i, next);
+  }
+
+  const cap = MeshBuilder.CreateDisc(`buildingCap${index}`, { radius: 1, tessellation: n }, scene);
+  const capVD = new VertexData();
+  capVD.positions = capPositions;
+  capVD.indices = capIndices;
+  const normals = new Float32Array(capPositions.length);
+  VertexData.ComputeNormals(capPositions, capIndices, normals);
+  capVD.normals = normals;
+  capVD.applyToMesh(cap);
+
+  return { ribbon, cap };
+}
+
+const Buildings: FC<{
+  buildingsCenter: Coords;
+  origin: Coords;
+}> = memo(({ buildingsCenter, origin }) => {
+  const { scene } = useBabylonMap();
+
+  const buildings = suspend(
+    () => {
+      const start = { ...buildingsCenter };
+      start.latitude -= 0.01;
+      start.longitude -= 0.01;
+      const end = { ...buildingsCenter };
+      end.latitude += 0.01;
+      end.longitude += 0.01;
+      return getBuildingsData({ start, end });
+    },
+    [buildingsCenter]
+  );
+
+  const lastTime = useRef(performance.now());
+
+  // Prepare animation data for each building
+  const animData = useMemo<BuildingAnimData[]>(() => {
+    return buildings.map(() => ({
+      c0: lerpHSL(night, day, rand(0, 1)).clone(),
+      c1: lerpHSL(day, night, rand(0, 1)).clone(),
+      animOffset: rand(0, 2 * Math.PI),
+      animSpeed: rand(1, 2),
+      emissiveIntensity: rand(0, 1) < 0.05 ? 3.5 : 0,
+    }));
+  }, [buildings]);
+
+  // Create meshes and materials
+  const meshData = useRef<{ meshes: Mesh[]; mats: StandardMaterial[] }>({ meshes: [], mats: [] });
+
+  useEffect(() => {
+    if (!scene) return;
+
+    // Clean up previous
+    meshData.current.meshes.forEach(m => m.dispose());
+    meshData.current.mats.forEach(m => m.dispose());
+
+    if (buildings.length === 0) return;
+
+    const meshes: Mesh[] = [];
+    const mats: StandardMaterial[] = [];
+
+    for (let i = 0; i < buildings.length; i++) {
+      const element = buildings[i];
+      const poly = element.geometry;
+      if (!poly || poly.length < 3) continue;
+
+      let height = parseFloat(element.tags?.height || "0");
+      if (!height) height = parseFloat(element.tags?.["building:levels"] || "1") * 3;
+      const base = parseFloat(element.tags?.min_height || "0");
+
+      const result = createBuildingMesh(poly, origin, base, height, scene, i);
+      if (!result) continue;
+
+      const mat = new StandardMaterial(`bMat${i}`, scene);
+      mat.diffuseColor = lerpHSL(night, day, rand(0, 1)).clone();
+      mat.specularPower = 64;
+      mat.emissiveColor = Color3.Black();
+      mat.alpha = 0.9;
+
+      result.ribbon.material = mat;
+      result.cap.material = mat;
+
+      meshes.push(result.ribbon, result.cap);
+      mats.push(mat);
+    }
+
+    meshData.current = { meshes, mats };
+
+    return () => {
+      meshes.forEach(m => m.dispose());
+      mats.forEach(m => m.dispose());
+    };
+  }, [scene, buildings, origin]);
+
+  // Animate colors
+  useEffect(() => {
+    if (!scene) return;
+
+    const observer = scene.onBeforeRenderObservable.add(() => {
+      const now = performance.now();
+      const delta = (now - lastTime.current) / 1000;
+      lastTime.current = now;
+
+      const mats = meshData.current.mats;
+      if (!mats.length) return;
+
+      for (let i = 0; i < animData.length && i < mats.length; i++) {
+        const d = animData[i];
+        d.animOffset += delta * d.animSpeed;
+        const sinValue = Math.abs(Math.sin(d.animOffset));
+        const color = lerpHSL(d.c0, d.c1, sinValue);
+        const mat = mats[i];
+        mat.diffuseColor.copyFrom(color);
+        if (d.emissiveIntensity > 0) {
+          const emissive = color.scale(d.emissiveIntensity);
+          mat.emissiveColor = emissive;
+        } else {
+          mat.emissiveColor = Color3.Black();
+        }
+      }
+    });
+
+    return () => { scene.onBeforeRenderObservable.remove(observer); };
+  }, [scene, animData]);
+
+  return null;
+});
+Buildings.displayName = "Buildings";
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const hemi = new HemisphericLight("ambient", new Vector3(0, 1, 0), scene);
+    hemi.intensity = Math.PI;
+    const dir = new DirectionalLight("dir", new Vector3(-2.5, -50, -5).normalize(), scene);
+    dir.intensity = Math.PI;
+    return () => { hemi.dispose(); dir.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+function Bloom({ enabled, intensity, threshold, levels }: {
+  enabled: boolean; intensity: number; threshold: number; levels: number;
+}) {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene || !enabled) return;
+    const pipeline = new DefaultRenderingPipeline(
+      "bloomPipeline", true, scene,
+      scene.activeCamera ? [scene.activeCamera!] : undefined
+    );
+    pipeline.bloomEnabled = true;
+    pipeline.bloomWeight = intensity;
+    pipeline.bloomThreshold = threshold;
+    pipeline.bloomKernel = 64;
+    pipeline.bloomScale = levels > 0 ? levels / 5 : 0.5;
+    return () => { pipeline.dispose(); };
+  }, [scene, enabled, intensity, threshold, levels]);
+  return null;
+}
+
+export default { title: "Buildings 3D" };
+
+export function Default() {
+  const { bloom, levels, intensity, threshold, smoothing } = useControls("bloom", {
+    bloom: { value: true },
+    levels: { value: 3, min: 0, max: 10, step: 0.01 },
+    intensity: { value: 1.62, min: 0, max: 2, step: 0.01 },
+    threshold: { value: 0.1, min: 0, max: 2, step: 0.01, label: "threshold" },
+    smoothing: { value: 2, min: 0, max: 5, step: 0.01, label: "smoothing" },
+  });
+
+  // Default to overlay mode
+  useEffect(() => {
+    const overlay = levaStore.get("overlay");
+    levaStore.setValueAtPath("overlay", true, true);
+    return () => {
+      if (overlay) return;
+      levaStore.setValueAtPath("overlay", overlay, true);
+    };
+  }, []);
+
+  return (
+    <StoryMap longitude={coords.longitude} latitude={coords.latitude} zoom={18} pitch={60}>
+      <Lights />
+      <AdaptiveDpr />
+      <Bloom enabled={bloom} intensity={intensity} threshold={threshold} levels={levels} />
+      <Buildings buildingsCenter={coords} origin={coords} />
+    </StoryMap>
+  );
+}

package/stories/src/canvas/mapbox.stories.tsx

@@ -0,0 +1,113 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import { MeshBuilder, StandardMaterial, Vector3, Color3, HemisphericLight } from '@babylonjs/core';
+import { Canvas } from 'react-babylon-map';
+import MapboxGl from "mapbox-gl";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import Map from 'react-map-gl/mapbox';
+import { useControls } from "leva";
+import { useBabylonMap } from 'react-babylon-map';
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), scene);
+    light.intensity = 1;
+    const dirLight = new HemisphericLight("dirLight", new Vector3(1, 4.5, 3), scene);
+    dirLight.intensity = Math.PI;
+    dirLight.diffuse = Color3.FromHexString("#60666C");
+    return () => { light.dispose(); dirLight.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+Lights.displayName = 'Lights';
+
+const BabylonBox: FC<{ scale?: number; position?: [number, number, number] }> =
+  memo(({ scale = 500, position }) => {
+    const { scene } = useBabylonMap();
+    const boxRef = useRef<any>(null);
+    const matRef = useRef<any>(null);
+    const [hovered, setHovered] = useState(false);
+    const [clicked, setClicked] = useState(false);
+
+    useEffect(() => {
+      if (!scene) return;
+      const box = MeshBuilder.CreateBox("box", { size: scale }, scene);
+      box.position.set(
+        position?.[0] || 0,
+        position?.[1] || 0,
+        position?.[2] || 0,
+      );
+      boxRef.current = box;
+      const mat = new StandardMaterial("boxMat", scene);
+      mat.diffuseColor = Color3.FromHexString("#ffa500");
+      matRef.current = mat;
+      box.material = mat;
+      return () => { box.dispose(); mat.dispose(); };
+    }, [scene, scale, position]);
+
+    useEffect(() => {
+      if (!scene || !boxRef.current) return;
+    const observer = scene.onBeforeRenderObservable.add(() => {
+      const dt = scene.getEngine().getDeltaTime() / 1000;
+      boxRef.current.rotation.x += dt;
+      boxRef.current.rotation.z -= dt;
+    });
+    return () => scene.onBeforeRenderObservable.remove(observer);
+  }, [scene]);
+
+    useEffect(() => {
+      if (!matRef.current) return;
+      matRef.current.diffuseColor = hovered
+        ? Color3.FromHexString("#ff69b4")
+        : Color3.FromHexString("#ffa500");
+    }, [hovered]);
+
+    useEffect(() => {
+      if (!boxRef.current) return;
+      boxRef.current.scaling.setAll(clicked ? 1.5 : 1);
+    }, [clicked]);
+
+    return null;
+  });
+BabylonBox.displayName = 'BabylonBox';
+
+export default { title: 'Canvas' };
+
+export function Mapbox() {
+  const { mapboxToken } = useControls({
+    mapboxToken: {
+      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
+      label: 'mapbox token',
+    }
+  })
+
+  MapboxGl.accessToken = mapboxToken;
+
+  return (
+    <div style={{ height: '100vh' }}>
+      {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
+      {!!mapboxToken && (
+        <Map
+          antialias
+          initialViewState={{ latitude: 51, longitude: 0, zoom: 13, pitch: 60 }}
+          mapStyle="mapbox://styles/mapbox/streets-v12"
+          mapboxAccessToken={mapboxToken}
+        >
+          <Canvas latitude={51} longitude={0}>
+            <Lights />
+            <BabylonBox scale={500} position={[-600, 250, 0]} />
+            <BabylonBox scale={500} position={[600, 250, 0]} />
+          </Canvas>
+        </Map>
+      )}
+    </div>
+  );
+}
+
+const Center: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{
+    display: 'flex', height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center',
+  }}>{children}</div>
+);

package/stories/src/canvas/maplibre.stories.tsx

@@ -0,0 +1,93 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import { HemisphericLight, MeshBuilder, StandardMaterial, Vector3, Color3 } from '@babylonjs/core';
+import { Canvas } from 'react-babylon-map/maplibre';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import Map from 'react-map-gl/maplibre';
+import { Leva } from "leva";
+
+import { useBabylonMap } from "react-babylon-map/maplibre";
+
+function Lights() {
+  const { scene } = useBabylonMap();
+  useEffect(() => {
+    if (!scene) return;
+    const light = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), scene);
+    light.intensity = 1;
+    const dirLight = new HemisphericLight("dirLight", new Vector3(1, 4.5, 3), scene);
+    dirLight.intensity = Math.PI;
+    dirLight.diffuse = Color3.FromHexString("#60666C");
+    return () => { light.dispose(); dirLight.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+Lights.displayName = 'Lights';
+
+const BabylonBox: FC<{ scale?: number; position?: [number, number, number]; hovered?: boolean }> =
+  memo(({ scale = 500, position, hovered }) => {
+    const { scene } = useBabylonMap();
+    const boxRef = useRef<any>(null);
+    const matRef = useRef<any>(null);
+
+    useEffect(() => {
+      if (!scene) return;
+      const box = MeshBuilder.CreateBox("box", { size: scale }, scene);
+      box.position.set(
+        position?.[0] || 0,
+        position?.[1] || 0,
+        position?.[2] || 0,
+      );
+      boxRef.current = box;
+
+      const mat = new StandardMaterial("boxMat", scene);
+      mat.diffuseColor = Color3.FromHexString("#ffa500");
+      matRef.current = mat;
+      box.material = mat;
+
+      return () => { box.dispose(); mat.dispose(); };
+    }, [scene, scale, position]);
+
+    // Rotation
+    useEffect(() => {
+    if (!scene || !boxRef.current) return;
+    const observer = scene.onBeforeRenderObservable.add(() => {
+      const dt = scene.getEngine().getDeltaTime() / 1000;
+    boxRef.current.rotation.x += dt;
+    boxRef.current.rotation.z -= dt;
+    });
+    return () => scene.onBeforeRenderObservable.remove(observer);
+  }, [scene]);
+
+  // Hover color
+  useEffect(() => {
+    if (!matRef.current) return;
+    matRef.current.diffuseColor = hovered
+      ? Color3.FromHexString("#ff69b4")
+      : Color3.FromHexString("#ffa500");
+  }, [hovered]);
+
+    return null;
+  });
+BabylonBox.displayName = 'BabylonBox';
+
+export default { title: 'Canvas' };
+
+export function Maplibre() {
+  return (<>
+    <Leva theme={{ sizes: { rootWidth: '340px', controlWidth: '150px' } }} />
+    <div style={{ height: '100vh' }}>
+      <Map
+        canvasContextAttributes={{ antialias: true }}
+        initialViewState={{ latitude: 51, longitude: 0, zoom: 13, pitch: 60 }}
+        mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+      >
+        <Canvas latitude={51} longitude={0}>
+          <Lights />
+          <BabylonBox scale={500} position={[-600, 250, 0]} />
+          <BabylonBox scale={500} position={[600, 250, 0]} />
+        </Canvas>
+      </Map>
+    </div>
+  </>
+  )
+}