react-babylon-map 0.0.1

package/stories/src/comparison.stories.tsx

@@ -0,0 +1,161 @@
+import { FC, memo, useEffect, useRef, useState } from "react";
+import {
+  MeshBuilder, StandardMaterial, Vector3, Color3, Color4,
+  HemisphericLight, DirectionalLight, PointLight, ShadowGenerator,
+  GroundMesh,
+} from '@babylonjs/core';
+import { useControls } from "leva";
+import { StoryMap } from "./story-map";
+import { useBabylonMap } from 'react-babylon-map';
+
+// ── Lights ──────────────────────────────────────────────────────
+
+function Lights({ showCamHelper }: { showCamHelper?: boolean }) {
+  const { scene } = useBabylonMap();
+
+  useEffect(() => {
+    if (!scene) return;
+
+    // Ambient
+    const hemi = new HemisphericLight("ambient", new Vector3(0, 1, 0), scene);
+    hemi.intensity = 0.5;
+
+    // Directional (sun) with shadows
+    const dir = new DirectionalLight("dir", new Vector3(-2.5, -50, -5).normalize(), scene);
+    dir.position = new Vector3(2.5, 50, 5);
+    dir.intensity = 1.5;
+
+    const shadowGen = new ShadowGenerator(1024, dir);
+    shadowGen.useBlurExponentialShadowMap = true;
+    shadowGen.blurKernel = 32;
+
+    // Point lights
+    const p1 = new PointLight("p1", new Vector3(50, 5, 10), scene);
+    p1.intensity = 1;
+    const p2 = new PointLight("p2", new Vector3(-50, 5, 10), scene);
+    p2.intensity = 1;
+    const p3 = new PointLight("p3", new Vector3(0, 5, 0), scene);
+    p3.intensity = 1;
+
+    // Store shadow generator on scene metadata so boxes can add themselves
+    (scene as any)._shadowGenerator = shadowGen;
+
+    return () => {
+      shadowGen.dispose();
+      hemi.dispose(); dir.dispose();
+      p1.dispose(); p2.dispose(); p3.dispose();
+    };
+  }, [scene]);
+
+  return null;
+}
+Lights.displayName = 'Lights';
+
+// ── Floor ───────────────────────────────────────────────────────
+
+function Floor() {
+  const { scene } = useBabylonMap();
+
+  useEffect(() => {
+    if (!scene) return;
+    const ground = MeshBuilder.CreateGround("floor", { width: 200, height: 200 }, scene);
+    const mat = new StandardMaterial("floorMat", scene);
+    mat.diffuseColor = new Color3(0.3, 0.3, 0.3);
+    mat.alpha = 0.5;
+    ground.material = mat;
+    ground.receiveShadows = true;
+
+    return () => { ground.dispose(); mat.dispose(); };
+  }, [scene]);
+
+  return null;
+}
+Floor.displayName = 'Floor';
+
+// ── Animated Box ────────────────────────────────────────────────
+
+function MyBox({ position, animate }: { position: [number, number, number]; animate?: boolean }) {
+  const { scene } = useBabylonMap();
+  const [hovered, setHovered] = useState(false);
+  const boxRef = useRef<any>(null);
+  const matRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!scene) return;
+
+    const box = MeshBuilder.CreateBox("box", { width: 16, height: 16, depth: 16 }, scene);
+    box.position = new Vector3(position[0], position[1], position[2]);
+    boxRef.current = box;
+
+    const mat = new StandardMaterial("boxMat", scene);
+    mat.diffuseColor = Color3.FromHexString("#ffa500");
+    mat.specularColor = new Color3(0.3, 0.3, 0.3);
+    matRef.current = mat;
+    box.material = mat;
+
+    // Add to shadow caster list
+    const shadowGen = (scene as any)._shadowGenerator as ShadowGenerator | undefined;
+    if (shadowGen) shadowGen.addShadowCaster(box);
+
+    box.metadata = {
+      onPointerOver: () => setHovered(true),
+      onPointerOut: () => setHovered(false),
+    };
+
+    return () => {
+      box.dispose(); mat.dispose();
+    };
+  }, [scene]);
+
+  // Rotation animation
+  useEffect(() => {
+    if (!scene) return;
+    if (!animate) return;
+
+    let lastTime = performance.now();
+    const observer = scene.onBeforeRenderObservable.add(() => {
+      if (!boxRef.current) return;
+      const now = performance.now();
+      const dt = (now - lastTime) / 1000;
+      lastTime = now;
+      boxRef.current.rotation.y += dt;
+    });
+    return () => scene.onBeforeRenderObservable.remove(observer);
+  }, [scene, animate]);
+
+  // Hover color
+  useEffect(() => {
+    if (!matRef.current) return;
+    matRef.current.diffuseColor = hovered
+      ? Color3.FromHexString("#ff0000")
+      : Color3.FromHexString("#ffa500");
+  }, [hovered]);
+
+  return null;
+}
+MyBox.displayName = 'MyBox';
+
+// ── Stories ─────────────────────────────────────────────────────
+
+export default { title: 'Comparison' };
+
+export function WithMap() {
+  const { showCamHelper } = useControls({ showCamHelper: { value: false, label: 'show camera helper' } });
+  const { animate } = useControls({ animate: true });
+
+  return (
+    <div style={{ height: '100vh', position: 'relative' }}>
+      <StoryMap
+        latitude={51.5073218}
+        longitude={-0.1276473}
+        zoom={18}
+        pitch={60}
+      >
+        <Lights showCamHelper={showCamHelper} />
+        <Floor />
+        <MyBox animate={animate} position={[-8 * 3, 8 * 1.5, 0]} />
+        <MyBox animate={animate} position={[8 * 3, 8 * 1.5, 0]} />
+      </StoryMap>
+    </div>
+  );
+}

package/stories/src/extrude/chaillot.ts

@@ -0,0 +1,8 @@
+type Poly2D = [number, number][];
+
+export const Chaillot: Poly2D[] = [
+  [[2.2876091301441193,48.86232738746588],[2.287643998861313,48.86230709517818],[2.2876587510108948,48.86231680018636],[2.2876694798469543,48.862309741998786],[2.2876547276973724,48.86230003698921],[2.287694960832596,48.86227356877174],[2.2877097129821777,48.86228415606041],[2.2877217829227448,48.86227709786823],[2.287707030773163,48.86226651057805],[2.287745922803879,48.862241806892314],[2.2877606749534607,48.86225151191317],[2.287774085998535,48.862243571441724],[2.2877593338489532,48.86223298414444],[2.287798225879669,48.86220828044213],[2.287812978029251,48.8622179854695],[2.287825047969818,48.86221004499271],[2.287810295820236,48.86219945768838],[2.2878505289554596,48.862174753969526],[2.2878652811050415,48.86218445900337],[2.2878773510456085,48.86217651852127],[2.2878625988960266,48.86216593120986],[2.28790283203125,48.86214034519796],[2.2879189252853394,48.862150932514794],[2.2879309952259064,48.86214299202737],[2.2879162430763245,48.86213328698548],[2.287956476211548,48.86210681867982],[2.2879712283611298,48.862116523726854],[2.2879832983016968,48.862108583233976],[2.287968546152115,48.86209887818541],[2.288007438182831,48.86207329213923],[2.28802353143692,48.862083879470276],[2.288035601377487,48.86207682124984],[2.2880208492279053,48.86206623391732],[2.288047671318054,48.862047706080006],[2.2879792749881744,48.86200094531725],[2.288035601377487,48.86196388958743],[2.2880007326602936,48.86194095031237],[2.2880208492279053,48.86192683383018],[2.287999391555786,48.86191271734401],[2.287968546152115,48.8619135996245],[2.2879403829574585,48.861910070502404],[2.2879256308078766,48.86190654138005],[2.287900149822235,48.86189595401149],[2.287878692150116,48.861883602078706],[2.287861257791519,48.86186683873646],[2.287849187850952,48.86184831082531],[2.28784516453743,48.86182890062537],[2.2878478467464447,48.8618094904179],[2.2878263890743256,48.861795373898616],[2.2878049314022064,48.86180860813556],[2.287770062685013,48.86178478650655],[2.2877123951911926,48.861820960086845],[2.287643998861313,48.861775081395194],[2.2876332700252533,48.861780375092536],[2.2875353693962097,48.86170538099469],[2.2873100638389587,48.861511278102],[2.2872644662857056,48.861463634549665],[2.2871947288513184,48.861383346238455],[2.28715717792511,48.8613312911107],[2.2871048748493195,48.861241297372345],[2.2870901226997375,48.86121306400929],[2.2870485484600067,48.86112483464717],[2.28703111410141,48.86107189695525],[2.2866368293762207,48.86107189695525],[2.286640852689743,48.86109130744879],[2.2866716980934143,48.86118483063035],[2.28671595454216,48.86128011822049],[2.286752164363861,48.86134981921322],[2.2867950797080994,48.86141687324121],[2.2868473827838898,48.86149451463507],[2.286883592605591,48.861535982148354],[2.2870364785194397,48.86169302901487],[2.2871196269989014,48.86176802313122],[2.2872430086135864,48.861871250142855],[2.287355661392212,48.861957713629806],[2.2872912883758545,48.86199829848033],[2.287275195121765,48.86199565164324],[2.2872671484947205,48.86199565164324],[2.287251055240631,48.86199829848033],[2.287236303091049,48.86200270987513],[2.2872282564640045,48.862007121269556],[2.28722020983696,48.862014179499795],[2.2872135043144226,48.86202388456479],[2.287212163209915,48.862029178235844],[2.2872108221054077,48.86204064785446],[2.2872135043144226,48.862047706080006],[2.2872067987918854,48.862052117470455],[2.287275195121765,48.86209799590816],[2.2872188687324524,48.8621350515387],[2.2872550785541534,48.86215975527713],[2.287241667509079,48.86216857803791],[2.2873395681381226,48.86223563096897],[2.287433445453644,48.86230003698921],[2.2874468564987183,48.86229121425163],[2.2874844074249268,48.86231591791298],[2.287542074918747,48.862280626964434],[2.2876091301441193,48.86232738746588]],
+  [[2.290222942829132,48.86337287028812],[2.290288656949997,48.86336934126891],[2.290354371070862,48.86336228322975],[2.290399968624115,48.86335610744467],[2.2904670238494873,48.86334375587222],[2.2905313968658447,48.863328757530184],[2.2905756533145905,48.863316405951],[2.290634661912918,48.863297878576475],[2.2906923294067383,48.86327582216933],[2.2906936705112457,48.863274939912856],[2.2906936705112457,48.8629361522716],[2.290666848421097,48.862956444304245],[2.290622591972351,48.86298644120703],[2.290574312210083,48.86301379130862],[2.290540784597397,48.86303143652748],[2.2904710471630096,48.86306231564558],[2.2904106974601746,48.86308437214683],[2.290370464324951,48.863094959263975],[2.2903288900852203,48.86310378185988],[2.290285974740982,48.8631099576761],[2.2902430593967438,48.86311436897293],[2.2901558876037598,48.86311613349156],[2.2901062667369843,48.86311525123227],[2.290057986974716,48.8631108399355],[2.2900083661079407,48.86310378185988],[2.289942651987076,48.86309407700432],[2.289879620075226,48.86308172536721],[2.289816588163376,48.863065844686446],[2.2897562384605408,48.863047317219156],[2.2896382212638855,48.863010262264055],[2.2895389795303345,48.86297497180513],[2.28946253657341,48.8629449748955],[2.2893592715263367,48.86289909723419],[2.2892600297927856,48.862849690475],[2.2891902923583984,48.8628117531089],[2.2890588641166687,48.86273764282248],[2.2889676690101624,48.86268206003561],[2.2889770567417145,48.86267676643365],[2.2889140248298645,48.86263353532996],[2.2889703512191772,48.86259824460541],[2.288934141397476,48.86257265881454],[2.288954257965088,48.86255942477965],[2.2889328002929688,48.86254530847191],[2.288903295993805,48.86254619074123],[2.288873791694641,48.862542661663724],[2.288846969604492,48.86253472123846],[2.288822829723358,48.862522369463306],[2.288804054260254,48.86250737087511],[2.288789302110672,48.86248972547142],[2.2887812554836273,48.86247119779091],[2.2887812554836273,48.862451787832526],[2.2887825965881348,48.86244296512166],[2.2887611389160156,48.86242796650964],[2.2887396812438965,48.8624412005793],[2.288704812526703,48.86241737925141],[2.2886458039283752,48.86245355237449],[2.2885867953300476,48.86241208562143],[2.288578748703003,48.86240679199091],[2.288549244403839,48.86242620196674],[2.2885331511497498,48.86241561470814],[2.28852242231369,48.862422672880825],[2.288537174463272,48.86243326013792],[2.2884996235370636,48.862457963729184],[2.288482189178467,48.86244649420618],[2.2884687781333923,48.862455316916396],[2.2884848713874817,48.86246678643738],[2.2884459793567657,48.862493254552675],[2.2884298861026764,48.86248266730823],[2.288416475057602,48.86249060774176],[2.2884325683116913,48.86250119498453],[2.288392335176468,48.86252766308158],[2.2883762419223785,48.86251707584444],[2.288362830877304,48.8625241340028],[2.288380265235901,48.86253560350801],[2.2883400321006775,48.86256118931783],[2.2883225977420807,48.86255060208774],[2.2883105278015137,48.86255766024138],[2.288326621055603,48.862570012007836],[2.2882890701293945,48.86259383326308],[2.2882716357707977,48.86258324603992],[2.288256883621216,48.86259206872606],[2.2882743179798126,48.862603538215666],[2.288236767053604,48.86262735945499],[2.2882193326950073,48.86261588997081],[2.2882072627544403,48.86262471265118],[2.2882233560085297,48.86263529986556],[2.28814959526062,48.86268206003561],[2.2881415486335754,48.86268735363706],[2.288209944963455,48.86273411375848],[2.2881536185741425,48.86277028665262],[2.288157641887665,48.86277293344875],[2.288191169500351,48.862795872342474],[2.288176417350769,48.86280469499113],[2.288272976875305,48.862870864806325],[2.2883695363998413,48.8629361522716],[2.2883829474449158,48.8629264473835],[2.28840172290802,48.862938799058924],[2.288423180580139,48.86295379751786],[2.2884781658649445,48.862914977967876],[2.288546562194824,48.862961737876645],[2.2885559499263763,48.862955562042146],[2.2885707020759583,48.86295909109052],[2.2885867953300476,48.86295909109052],[2.2885948419570923,48.862957326566345],[2.288609594106674,48.86295379751786],[2.2886230051517487,48.8629458571578],[2.2886310517787933,48.86293791679651],[2.2886377573013306,48.86292291833283],[2.2886377573013306,48.862917624756335],[2.2886337339878082,48.86290615533866],[2.2886981070041656,48.86286380669688],[2.2888724505901337,48.86296703144848],[2.289125919342041,48.86309760604291],[2.2892452776432037,48.86315495288551],[2.2893472015857697,48.86319730128096],[2.289453148841858,48.86323612061193],[2.289561778306961,48.86327052863015],[2.289597988128662,48.863281115707935],[2.28970929980278,48.86331023016024],[2.2898246347904205,48.86333493331861],[2.2899332642555237,48.863354342934514],[2.290021777153015,48.86336404773965],[2.290111631155014,48.863371105778555],[2.290201485157013,48.86337287028812],[2.290222942829132,48.86337287028812]],
+  [[2.2870512306690216,48.86113012841329],[2.2870485484600067,48.86112483464717],[2.28703111410141,48.86107189695525],[2.2870177030563354,48.86101719461476],[2.287016361951828,48.86098102045355],[2.2870177030563354,48.860944846266165],[2.2870230674743652,48.860915730437824],[2.28703111410141,48.860889261488296],[2.287043184041977,48.860863674823776],[2.2870592772960663,48.86083808814615],[2.2870874404907227,48.86079926695513],[2.2871115803718567,48.86077279794398],[2.2871585190296173,48.86073221209972],[2.2872456908226013,48.86066956866679],[2.287319451570511,48.86062457122293],[2.2873127460479736,48.860620159706656],[2.2873328626155853,48.86060780745899],[2.287263125181198,48.86055928074225],[2.287307381629944,48.860530164689635],[2.287265807390213,48.860500166314665],[2.2872738540172577,48.860494872481894],[2.2871142625808716,48.86038458417244],[2.2871048748493195,48.86038987801686],[2.2870592772960663,48.86035987955779],[2.287013679742813,48.86038987801686],[2.2870056331157684,48.860383701864976],[2.28684201836586,48.86048957864864],[2.2868500649929047,48.86049575478742],[2.286805808544159,48.86052487086005],[2.2868259251117706,48.86053810543294],[2.2867481410503387,48.8605866321702],[2.286796420812607,48.860620159706656],[2.2867441177368164,48.86067574478338],[2.286701202392578,48.860735741304865],[2.2866716980934143,48.860791326253235],[2.2866448760032654,48.86085838102949],[2.2866354882717133,48.86089720217464],[2.286631464958191,48.860927200311636],[2.2866274416446686,48.860975726671654],[2.286628782749176,48.86099778409249],[2.2866328060626984,48.8610498395671],[2.286640852689743,48.86109130744879],[2.2866542637348175,48.86113012841329],[2.2870512306690216,48.86113012841329]],
+  [[2.2906051576137543,48.86330670113662],[2.290634661912918,48.863297878576475],[2.2906923294067383,48.86327582216933],[2.2907473146915436,48.863251118981765],[2.290790230035782,48.86322994481131],[2.290847897529602,48.863269646373595],[2.290892153978348,48.86324141415477],[2.2909002006053925,48.863246707697016],[2.2910651564598083,48.86313995448688],[2.2910557687282562,48.86313377867435],[2.2910986840724945,48.86310642863836],[2.2911013662815094,48.86310466411942],[2.291058450937271,48.86307554954749],[2.2910678386688232,48.86306937372706],[2.2910302877426147,48.86304378817701],[2.290991395711899,48.863017320352895],[2.290916293859482,48.86296614918652],[2.2909069061279297,48.8629608556146],[2.290898859500885,48.86296614918652],[2.290853261947632,48.8629361522716],[2.2908076643943787,48.86296526692456],[2.2907379269599915,48.862916742493525],[2.290715128183365,48.8629308586965],[2.2907084226608276,48.86292468285819],[2.290666848421097,48.862956444304245],[2.290622591972351,48.86298644120703],[2.2906051576137543,48.8629961460835],[2.2906051576137543,48.86330670113662]]
+];

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

@@ -0,0 +1,139 @@
+import { FC, memo, useEffect, useMemo } from "react";
+import {
+  Mesh, MeshBuilder, StandardMaterial, Vector3, Color3,
+  HemisphericLight, VertexData, VertexBuffer,
+} from '@babylonjs/core';
+import { useBabylonMap, coordsToVector3 } from 'react-babylon-map';
+import { StoryMap } from "./story-map";
+import { Chaillot } from "./extrude/chaillot";
+
+const origin = {
+  longitude: 2.289449241104535,
+  latitude: 48.861422672242895,
+};
+
+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;
+}
+
+/**
+ * Extrude a polygon footprint into a 3D building shape.
+ * Creates side walls + top cap using MeshBuilder.CreateRibbon.
+ */
+const ExtrudeShape: FC<{
+  points: [number, number][];
+  originCoords: typeof origin;
+  height?: number;
+  color?: string;
+}> = memo(({ points, originCoords, height = 30, color = '#e0e4cc' }) => {
+  const { scene } = useBabylonMap();
+
+  const positions3D = useMemo(
+    () => points.map(p => coordsToVector3({ longitude: p[0], latitude: p[1] }, originCoords)),
+    [points, originCoords]
+  );
+
+  useEffect(() => {
+    if (!scene || positions3D.length < 3) return;
+
+    const n = positions3D.length;
+    const walls: Vector3[][] = [];
+
+    // Build ribbon paths: bottom edge + top edge for each wall segment
+    const bottom: Vector3[] = [];
+    const top: Vector3[] = [];
+    for (let i = 0; i < n; i++) {
+      bottom.push(new Vector3(positions3D[i][0], 0, positions3D[i][2]));
+      top.push(new Vector3(positions3D[i][0], height, positions3D[i][2]));
+    }
+    // Close the loop
+    bottom.push(bottom[0].clone());
+    top.push(top[0].clone());
+
+    const ribbon = MeshBuilder.CreateRibbon('buildingWall', {
+      pathArray: [bottom, top],
+      closePath: true,
+      closeArray: false,
+    }, scene);
+
+    // Top cap (polygon triangulated as a fan)
+    const topCap: Vector3[] = [];
+    for (let i = 0; i < n; i++) {
+      topCap.push(new Vector3(positions3D[i][0], height, positions3D[i][2]));
+    }
+    const cap = MeshBuilder.CreateDisc('buildingCap', {
+      radius: 1,
+      tessellation: n,
+    }, scene);
+    // Replace disc geometry with our polygon
+    const capPositions: number[] = [];
+    const capIndices: number[] = [];
+    // Fan triangulation
+    for (let i = 0; i < n; i++) {
+      capPositions.push(positions3D[i][0], height, positions3D[i][2]);
+    }
+    // Center of polygon
+    let cx = 0, cz = 0;
+    for (const p of positions3D) { 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 capVD = new VertexData();
+    capVD.positions = capPositions;
+    capVD.indices = capIndices;
+    // Compute normals
+    const normals = new Float32Array(capPositions.length);
+    VertexData.ComputeNormals(capPositions, capIndices, normals);
+    capVD.normals = normals;
+    capVD.applyToMesh(cap);
+    cap.geometry?.setVerticesBuffer(new VertexBuffer(cap.getEngine(), normals, 'normal', false));
+
+    const mat = new StandardMaterial('buildingMat', scene);
+    mat.diffuseColor = Color3.FromHexString(color);
+    mat.specularColor = new Color3(0.5, 0.5, 0.5);
+    mat.specularPower = 64;
+    ribbon.material = mat;
+    cap.material = mat;
+
+    return () => {
+      ribbon.dispose();
+      cap.dispose();
+      mat.dispose();
+    };
+  }, [scene, positions3D, height, color]);
+
+  return null;
+});
+ExtrudeShape.displayName = 'ExtrudeShape';
+
+export default { title: 'Extrude Coordinates' };
+
+export function ExtrudeCoordinates() {
+  return (
+    <StoryMap
+      zoom={16.5}
+      longitude={origin.longitude}
+      latitude={origin.latitude}
+      bearing={-48}
+      pitch={59}
+    >
+      <Lights />
+      {Chaillot.map((points, i) => (
+        <ExtrudeShape key={i} points={points} originCoords={origin} />
+      ))}
+    </StoryMap>
+  );
+}

package/stories/src/free-3d-buildings/get-buildings-data.ts

@@ -0,0 +1,49 @@
+import { Coords } from "react-babylon-map";
+
+export interface OverpassElement {
+  type: "node" | "way" | "relation";
+  id: number;
+  lat?: number;
+  lon?: number;
+  tags?: {
+    height?: string;
+    min_height?: string;
+    ['building:levels']?: string;
+  };
+  nodes?: number[];
+  geometry?: Array<{
+    lat: number;
+    lon: number;
+  }>;
+}
+
+interface OverpassApiResponse {
+  version: number;
+  generator: string;
+  elements: OverpassElement[];
+}
+
+export async function getBuildingsData({ start, end }: { start: Coords, end: Coords }) {
+  const overpassApiUrl = "https://overpass-api.de/api/interpreter";
+  const bbox = [start.latitude, start.longitude, end.latitude, end.longitude].join(',');
+  const query = `
+  [out:json];
+  (
+    way["building"](${bbox});
+    way["building:part"](${bbox});
+    relation["building"](${bbox});
+    relation["building:part"](${bbox});
+  );
+  out body;
+  out geom;
+  `;
+
+  const response: OverpassApiResponse = await (await fetch(overpassApiUrl, {
+    method: 'POST',
+    body: query
+  })).json();
+
+  const buildings = response.elements.filter(e => e.geometry);
+
+  return buildings;
+}

package/stories/src/html-on-top.stories.tsx

@@ -0,0 +1,156 @@
+import { FC, memo, useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from 'react-dom';
+import {
+  MeshBuilder, StandardMaterial, Vector3, Color3, Matrix,
+  HemisphericLight,
+} 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(0, 1, 0), scene);
+    light.intensity = 1;
+    return () => { light.dispose(); };
+  }, [scene]);
+  return null;
+}
+
+/**
+ * Projects a 3D world position to screen coordinates and renders
+ * HTML content at that position via a React portal.
+ * Equivalent to drei's <Html>.
+ */
+const HtmlOverlay: FC<{
+  position: [number, number, number];
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}> = memo(({ position, children, style }) => {
+  const { scene, engine } = useBabylonMap();
+  const divRef = useRef<HTMLDivElement>(null);
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  // Find the map container (parent of canvas) to portal into
+  useEffect(() => {
+    if (!engine) return;
+    const canvas = engine.getRenderingCanvas();
+    if (!canvas) return;
+    // Walk up to find the positioned container div
+    const parent = canvas.parentElement?.parentElement;
+    if (parent) setContainer(parent);
+  }, [engine]);
+
+  // Update position each frame
+  useEffect(() => {
+    if (!scene || !engine || !divRef.current) return;
+    const canvas = engine.getRenderingCanvas();
+    if (!canvas) return;
+
+    const observer = scene.onAfterRenderObservable.add(() => {
+      if (!divRef.current || !scene.activeCamera) return;
+      const cam = scene.activeCamera;
+      const w = canvas.clientWidth;
+      const h = canvas.clientHeight;
+
+      // The frozen projection matrix IS the full WVP (world * view * proj).
+      // Transform position through it to get NDC, then map to screen.
+      const wvp = cam.getProjectionMatrix();
+      const pos = new Vector3(position[0], position[1], position[2]);
+
+      // Manual: multiply by WVP, perspective divide, map to screen
+      const x = wvp.m[0] * pos.x + wvp.m[4] * pos.y + wvp.m[8]  * pos.z + wvp.m[12];
+      const y = wvp.m[1] * pos.x + wvp.m[5] * pos.y + wvp.m[9]  * pos.z + wvp.m[13];
+      const z = wvp.m[2] * pos.x + wvp.m[6] * pos.y + wvp.m[10] * pos.z + wvp.m[14];
+      const w4 = wvp.m[3] * pos.x + wvp.m[7] * pos.y + wvp.m[11] * pos.z + wvp.m[15];
+
+      if (w4 === 0) return;
+      const ndcX = x / w4;
+      const ndcY = y / w4;
+      const ndcZ = z / w4;
+
+      // NDC [-1,1] -> screen [0,w], [0,h]
+      const screenX = (ndcX + 1) / 2 * w;
+      const screenY = (1 - ndcY) / 2 * h; // flip Y
+
+      divRef.current.style.left = `${screenX}px`;
+      divRef.current.style.top = `${screenY}px`;
+      divRef.current.style.display = ndcZ > 1 || ndcZ < -1 ? 'none' : 'block';
+    });
+
+    return () => { scene.onAfterRenderObservable.remove(observer); };
+  }, [scene, engine, position, container]);
+
+  if (!container) return null;
+
+  return createPortal(
+    <div
+      ref={divRef}
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        transform: 'translate(-50%, -100%)',
+        whiteSpace: 'nowrap',
+        zIndex: 10,
+        ...style,
+      }}
+    >
+      {children}
+    </div>,
+    container
+  );
+});
+HtmlOverlay.displayName = 'HtmlOverlay';
+
+/** Interactive box that changes color on hover */
+const MyBox: FC<{ position: [number, number, number]; rotation: number }> = memo(({ position, rotation }) => {
+  const { scene } = useBabylonMap();
+  const [hovered, setHovered] = useState(false);
+  const matRef = useRef<StandardMaterial | null>(null);
+
+  useEffect(() => {
+    if (!scene) return;
+    const box = MeshBuilder.CreateBox('box', { width: 500, height: 500, depth: 500 }, scene);
+    box.position.set(position[0], position[1], position[2]);
+    box.rotation.y = rotation;
+
+    const mat = new StandardMaterial('boxMat', scene);
+    mat.diffuseColor = Color3.FromHexString("#FFA500"); // orange
+    mat.emissiveColor = Color3.FromHexString("#FFA500").scale(0.2);
+    matRef.current = mat;
+    box.material = mat;
+
+    box.metadata = {
+      onPointerOver: () => setHovered(true),
+      onPointerOut: () => setHovered(false),
+    };
+
+    return () => { box.dispose(); mat.dispose(); };
+  }, [scene, position, rotation]);
+
+  // Update color on hover
+  useEffect(() => {
+    if (!matRef.current) return;
+    const hex = hovered ? '#800080' : '#FFA500'; // purple : orange
+    matRef.current.diffuseColor = Color3.FromHexString(hex);
+    matRef.current.emissiveColor = Color3.FromHexString(hex).scale(0.2);
+  }, [hovered]);
+
+  return null;
+});
+MyBox.displayName = 'MyBox';
+
+export default { title: 'HTML on Top' };
+
+export function Default() {
+  return (
+    <StoryMap latitude={51} longitude={0} zoom={13} pitch={60}>
+      <Lights />
+      <MyBox position={[0, 250, 0]} rotation={45 * Math.PI / 180} />
+      <HtmlOverlay position={[0, 500, 0]} style={{ textAlign: 'center', fontSize: '2em', width: '10em', lineHeight: '1.5em' }}>
+        <i>Some</i> <b>HTML</b><br />content!
+      </HtmlOverlay>
+    </StoryMap>
+  );
+}

package/stories/src/ifc/ifc-to-babylon.ts

@@ -0,0 +1,97 @@
+import { Mesh, Scene, VertexData } from "@babylonjs/core";
+import type { MeshData } from "@ifc-lite/geometry";
+
+/**
+ * Convert a single IFC MeshData to a Babylon.js Mesh.
+ * Swaps Y↔Z to convert IFC Z-up to Babylon Y-up (matching web-ifc-three behavior).
+ */
+export function meshDataToBabylon(data: MeshData, scene: Scene): Mesh {
+  const positions = new Float32Array(data.positions.length);
+  for (let i = 0; i < positions.length; i += 3) {
+    positions[i]     = data.positions[i];
+    positions[i + 1] = data.positions[i + 2]; // IFC Z → Babylon Y
+    positions[i + 2] = data.positions[i + 1]; // IFC Y → Babylon Z
+  }
+
+  const normals = new Float32Array(data.normals.length);
+  for (let i = 0; i < normals.length; i += 3) {
+    normals[i]     = data.normals[i];
+    normals[i + 1] = data.normals[i + 2];
+    normals[i + 2] = data.normals[i + 1];
+  }
+
+  const mesh = new Mesh(`ifc-${data.expressId}`, scene);
+  const vd = new VertexData();
+  vd.positions = positions;
+  vd.normals = normals;
+  vd.indices = data.indices;
+  vd.applyToMesh(mesh);
+  return mesh;
+}
+
+/**
+ * Merge all IFC meshes into a single Babylon.js Mesh for one draw call.
+ */
+export function batchWithVertexColors(allMeshes: MeshData[], scene: Scene): Mesh {
+  let totalVerts = 0;
+  let totalIdx = 0;
+  for (const m of allMeshes) {
+    totalVerts += m.positions.length / 3;
+    totalIdx += m.indices.length;
+  }
+
+  const positions = new Float32Array(totalVerts * 3);
+  const normals = new Float32Array(totalVerts * 3);
+  const indices = new Uint32Array(totalIdx);
+  const colors = new Float32Array(totalVerts * 4);
+
+  let vOff = 0;
+  let iOff = 0;
+  let cOff = 0;
+
+  for (const m of allMeshes) {
+    const vc = m.positions.length / 3;
+
+    positions.set(m.positions, vOff * 3);
+    normals.set(m.normals, vOff * 3);
+
+    for (let i = 0; i < vc; i++) {
+      colors[cOff++] = m.color[0];
+      colors[cOff++] = m.color[1];
+      colors[cOff++] = m.color[2];
+      colors[cOff++] = m.color[3];
+    }
+
+    for (let j = 0; j < m.indices.length; j++) {
+      indices[iOff++] = m.indices[j] + vOff;
+    }
+
+    vOff += vc;
+  }
+
+  const mesh = new Mesh("ifc-batch", scene);
+  const vd = new VertexData();
+  vd.positions = positions;
+  vd.normals = normals;
+  vd.indices = indices;
+  vd.colors = colors;
+  vd.applyToMesh(mesh);
+
+  return mesh;
+}
+
+/**
+ * Load an IFC file via @ifc-lite/geometry and return parsed MeshData array.
+ */
+export async function loadIFC(url: string): Promise<MeshData[]> {
+  const response = await fetch(url);
+  const buffer = new Uint8Array(await response.arrayBuffer());
+
+  const { GeometryProcessor } = await import("@ifc-lite/geometry");
+  const processor = new GeometryProcessor();
+  await processor.init();
+  const result = await processor.process(buffer);
+  processor.dispose();
+
+  return result.meshes;
+}