react-babylon-map 0.0.1

package/.claude/settings.local.json

@@ -0,0 +1,78 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn install:*)",
+      "Bash(pnpm install:*)",
+      "Bash(npx tsc:*)",
+      "Bash(echo \"EXIT: $?\")",
+      "Bash(ls /home/ney/os/react-babylon-map/node_modules/.pnpm/@babylonjs+core*/node_modules/@babylonjs/core/package.json)",
+      "Bash(npx cross-env:*)",
+      "Bash(pnpm build:*)",
+      "Bash(cross-env LIB_MODE=1 MAP_MODE=0 vite build)",
+      "Bash(cross-env LIB_MODE=2 MAP_MODE=0 vite build)",
+      "Bash(cross-env LIB_MODE=1 MAP_MODE=1 vite build)",
+      "Bash(cross-env LIB_MODE=2 MAP_MODE=1 vite build)",
+      "Bash(npm install:*)",
+      "WebSearch",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/tree/main\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src/components\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src/components/hosts\")",
+      "Bash(jq '.[] | {name: .name, type: .type, Map to get Engine.tsx file path})",
+      "Bash(curl -s \"https://api.github.com/search?q=repo%3Asimonedevit%2Freactylon+Engine+component&per_page=5\")",
+      "Bash(curl -s \"https://api.github.com/search?q=repo%3Asimonedevit%2Freactylon+Engine&per_page=5\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src/core\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src/core/components\")",
+      "Bash(curl -s \"https://api.github.com/search?q=repo%3Asimonedevit%2Freactylon+engine&type=code&per_page=10\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src/_generated\")",
+      "Bash(curl -s \"https://api.github.com/repos/simonedevit/reactylon/contents/packages/library/src/_generated/babylon.core.declarations.ts\")",
+      "Bash(curl -s \"https://raw.githubusercontent.com/simonedevit/reactylon/main/packages/library/src/_generated/babylon.core.declarations.ts\")",
+      "Bash(curl -s \"https://raw.githubusercontent.com/simonedevit/reactylon/master/packages/library/src/_generated/babylon.core.declarations.ts\")",
+      "Bash(curl -s \"https://raw.githubusercontent.com/simonedevit/reactylon/main/packages/library/package.json\")",
+      "Bash(curl -s \"https://unpkg.com/reactylon@latest\")",
+      "Bash(pnpm add:*)",
+      "Bash(curl:*)",
+      "Bash(npx playwright:*)",
+      "Bash(npx puppeteer:*)",
+      "Bash(pnpm list:*)",
+      "Bash(PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright:*)",
+      "Bash(PLAYWRIGHT_DOWNLOAD_HOST=https://registry.npmmirror.com/-/binary/playwright npx playwright install chromium)",
+      "Bash(PLAYWRIGHT_DOWNLOAD_HOST=https://cdn.npmmirror.com/binaries/playwright npx playwright install chromium)",
+      "Read(//tmp/**)",
+      "Bash(npm init:*)",
+      "Bash(npm ls:*)",
+      "Bash(node -e \"try{require\\('puppeteer-core'\\)}catch\\(e\\){console.log\\('not installed'\\)}\")",
+      "Bash(cp /tmp/capture.cjs /home/ney/os/react-babylon-map/capture.cjs)",
+      "Bash(node capture.cjs)",
+      "Bash(node -e \"let s=''; process.stdin.on\\('data',d=>s+=d\\); process.stdin.on\\('end',\\(\\)=>console.log\\('OK:',s.trim\\(\\).substring\\(0,50\\)\\)\\)\")",
+      "Bash(npx esbuild:*)",
+      "Bash(xxd /home/ney/os/react-babylon-map/stories/src/buildings-3d.stories.tsx)",
+      "Bash(xxd /home/ney/os/react-babylon-map/stories/src/billboard.stories.tsx)",
+      "Bash(npx puppeteer-core:*)",
+      "Bash(npm root:*)",
+      "Bash(NODE_PATH=/home/ney/.nvm/versions/node/v22.16.0/lib/node_modules node:*)",
+      "Bash(pnpm dev:*)",
+      "Read(//home/ney/os/react-three-map/stories/**)",
+      "Bash(yarn dev:*)",
+      "Bash(node -e \"const pkg = require\\('@ifc-lite/geometry'\\); console.log\\(Object.keys\\(pkg\\)\\)\")",
+      "Bash(npx ladle:*)",
+      "Bash(./node_modules/.bin/ladle serve:*)",
+      "Bash(/home/ney/os/react-babylon-map/stories/node_modules/.bin/ladle serve:*)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc.js)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-debug.js)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-debug2.js)",
+      "Bash(xxd)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-debug3.js)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-compare.js)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-final.js)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-debug4.js)",
+      "Bash(node -e ':*)",
+      "Bash(NODE_PATH=$\\(npm root -g\\) node /tmp/screenshot-ifc-final2.js)",
+      "Bash(node:*)"
+    ]
+  }
+}

package/demo.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Add a 3D model with babylon.js</title>
+    <meta property="og:description" content="Use a custom style layer with babylon.js to add a 3D model to the map." />
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.22.0/dist/maplibre-gl.css' />
+    <script src='https://unpkg.com/maplibre-gl@5.22.0/dist/maplibre-gl.js'></script>
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+<body>
+<script src="https://unpkg.com/babylonjs@5.42.2/babylon.js"></script>
+<script src="https://unpkg.com/babylonjs-loaders@5.42.2/babylonjs.loaders.min.js"></script>
+<div id="map"></div>
+<script>
+    const BABYLON = window.BABYLON;
+
+    const map = (window.map = new maplibregl.Map({
+        container: 'map',
+        style: 'https://tiles.openfreemap.org/styles/bright',
+        zoom: 18,
+        center: [148.9819, -35.3981],
+        pitch: 60,
+        canvasContextAttributes: {antialias: true} // create the gl context with MSAA antialiasing, so custom layers are antialiased
+    }));
+
+    // World matrix parameters
+    const worldOrigin = [148.9819, -35.39847];
+    const worldAltitude = 0;
+
+    // Maplibre.js default coordinate system (no rotations)
+    // +x east, -y north, +z up
+    //var worldRotate = [0, 0, 0];
+
+    // Babylon.js default coordinate system
+    // +x east, +y up, +z north
+    const worldRotate = [Math.PI / 2, 0, 0];
+
+    // Calculate mercator coordinates and scale
+    const worldOriginMercator = maplibregl.MercatorCoordinate.fromLngLat(
+        worldOrigin,
+        worldAltitude
+    );
+    const worldScale = worldOriginMercator.meterInMercatorCoordinateUnits();
+
+    // Calculate world matrix
+    const worldMatrix = BABYLON.Matrix.Compose(
+        new BABYLON.Vector3(worldScale, worldScale, worldScale),
+        BABYLON.Quaternion.FromEulerAngles(
+            worldRotate[0],
+            worldRotate[1],
+            worldRotate[2]
+        ),
+        new BABYLON.Vector3(
+            worldOriginMercator.x,
+            worldOriginMercator.y,
+            worldOriginMercator.z
+        )
+    );
+
+    // configuration of the custom layer for a 3D model per the CustomLayerInterface
+    const customLayer = {
+        id: '3d-model',
+        type: 'custom',
+        renderingMode: '3d',
+        onAdd (map, gl) {
+            this.engine = new BABYLON.Engine(
+                gl,
+                true,
+                {
+                    useHighPrecisionMatrix: true // Important to prevent jitter at mercator scale
+                },
+                true
+            );
+            this.scene = new BABYLON.Scene(this.engine);
+            /**
+            * optionally add
+            * this.scene.autoClearDepthAndStencil = false
+            * and for renderingGroupIds set this individually via
+            * this.scene.setRenderingAutoClearDepthStencil(1,false)
+            * to allow blending with maplibre scene
+            * as documented in https://doc.babylonjs.com/features/featuresDeepDive/scene/optimize_your_scene#reducing-calls-to-glclear
+            */
+            this.scene.autoClear = false;
+            /**
+            * use detachControl if you only want to interact with maplibre-gl and do not need pointer events of babylonjs.
+            * alternatively exchange this.scene.detachControl() with the following two lines, they will allow bubbling up events to maplibre-gl.
+            * this.scene.preventDefaultOnPointerDown = false
+            * this.scene.preventDefaultOnPointerUp = false
+            * https://doc.babylonjs.com/typedoc/classes/BABYLON.Scene#preventDefaultOnPointerDown
+            */
+            this.scene.detachControl();
+
+            this.scene.beforeRender = () => {
+                this.engine.wipeCaches(true);
+            };
+
+            // create simple camera (will have its project matrix manually calculated)
+            this.camera = new BABYLON.Camera(
+                'Camera',
+                new BABYLON.Vector3(0, 0, 0),
+                this.scene
+            );
+
+            // create simple light
+            const light = new BABYLON.HemisphericLight(
+                'light1',
+                new BABYLON.Vector3(0, 0, 100),
+                this.scene
+            );
+            light.intensity = 0.7;
+
+            // Add debug axes viewer, positioned at origin, 10 meter axis lengths
+            new BABYLON.AxesViewer(this.scene, 10);
+
+            // load GLTF model in to the scene
+            BABYLON.SceneLoader.LoadAssetContainerAsync(
+                'https://maplibre.org/maplibre-gl-js/docs/assets/34M_17/34M_17.gltf',
+                '',
+                this.scene
+            ).then((modelContainer) => {
+                modelContainer.addAllToScene();
+
+                const rootMesh = modelContainer.createRootMesh();
+
+                // If using maplibre.js coordinate system (+z up)
+                //rootMesh.rotation.x = Math.PI/2
+
+                // Create a second mesh
+                const rootMesh2 = rootMesh.clone();
+
+                // Position in babylon.js coordinate system
+                rootMesh2.position.x = 25; // +east, meters
+                rootMesh2.position.z = 25; // +north, meters
+            });
+
+            this.map = map;
+        },
+        render (gl, args) {
+            const cameraMatrix = BABYLON.Matrix.FromArray(args.defaultProjectionData.mainMatrix);
+
+            // world-view-projection matrix
+            const wvpMatrix = worldMatrix.multiply(cameraMatrix);
+
+            this.camera.freezeProjectionMatrix(wvpMatrix);
+
+            this.scene.render(false);
+            this.map.triggerRepaint();
+        }
+    };
+
+    map.on('style.load', () => {
+        map.addLayer(customLayer);
+    });
+</script>
+</body>
+</html>