@map-colonies/react-components 3.10.5 → 3.11.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.11.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.10.5...@map-colonies/react-components@3.11.0) (2022-05-02)
+
+
+### Bug Fixes
+
+* 3d story ([ee59db0](https://github.com/MapColonies/shared-components/commit/ee59db00f627b709368f830a3c7cf30dc2cf0525))
+* 3d with update ([86fd98b](https://github.com/MapColonies/shared-components/commit/86fd98b59d137f3bfddc351a98cefcef7b6fc19a))
+* 3d with update ([c554c57](https://github.com/MapColonies/shared-components/commit/c554c57ba85c68e3a5e53c128714d86733db10d0))
+* bounding volume minimum height ([87e0e81](https://github.com/MapColonies/shared-components/commit/87e0e8114f088a4997723f91760f80250e67f629))
+* build errors ([57bc0fa](https://github.com/MapColonies/shared-components/commit/57bc0fac22aebf865112d3c26d1bf46ee57d4dad))
+* fix ([6999626](https://github.com/MapColonies/shared-components/commit/69996260b96379813b051104204568b190d46eaa))
+* fix ([d958564](https://github.com/MapColonies/shared-components/commit/d958564cf178e7258fcdf2c21a1915b0e442c52c))
+* fix ([db76412](https://github.com/MapColonies/shared-components/commit/db7641201cde062e360131a73081867b4db854ba))
+* fix ([16c4499](https://github.com/MapColonies/shared-components/commit/16c4499a33c1c5d0bd34cd33958d5381e05ac3b6))
+* linting ([ca5f578](https://github.com/MapColonies/shared-components/commit/ca5f578f0e2f3422213e4f7e4cfa1abdd05576b8))
+* prettier ([f516da2](https://github.com/MapColonies/shared-components/commit/f516da2ce8f1b59d18ace5cafe6e12642046e19a))
+* prettier ([226ca71](https://github.com/MapColonies/shared-components/commit/226ca71c110abf50c89a36125c33f3e66cf195dc))
+* prettier ([6b1c751](https://github.com/MapColonies/shared-components/commit/6b1c7511355e35b199a5b127668df93e9c393c3b))
+* prettier ([c4e6c13](https://github.com/MapColonies/shared-components/commit/c4e6c13ebc77774b8764f582f710777e316b586b))
+* prettier ([a6613d7](https://github.com/MapColonies/shared-components/commit/a6613d7292aa8eb0b00f83d0885e61dfa4860ca0))
+* revert ([44c6a9b](https://github.com/MapColonies/shared-components/commit/44c6a9b6a34f2f8a6281f26c90ddfe3583832100))
+* story ([c348df4](https://github.com/MapColonies/shared-components/commit/c348df4cdf771483e5e5ade78bac3e734dd4965d))
+* unused ([bf696fe](https://github.com/MapColonies/shared-components/commit/bf696fe20b7e20223ef9f05962d9eecbb2760d06))
+* zoom to ([e78def4](https://github.com/MapColonies/shared-components/commit/e78def47940ab569691677ee71f6ac41a4c3f1bd))
+
+
+### Features
+
+* update tileset ([17ed73c](https://github.com/MapColonies/shared-components/commit/17ed73c43ba41ad54e70e6c17d152eeb38887009))
+
+
+
+
+
 ## [3.10.5](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.10.4...@map-colonies/react-components@3.10.5) (2022-03-29)
 
 

package/dist/cesium-map/layers/3d.tileset.js

@@ -15,22 +15,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cesium3DTileset = void 0;
-var cesium_1 = require("cesium");
 var react_1 = __importDefault(require("react"));
+var cesium_1 = require("cesium");
 var resium_1 = require("resium");
 var map_1 = require("../map");
+var GROUND_LEVEL = 0.0;
 var Cesium3DTileset = function (props) {
     var mapViewer = map_1.useCesiumMap();
     return (react_1.default.createElement(resium_1.Cesium3DTileset, __assign({}, props, { onReady: function (tileset) {
-            var _a;
+            var _a, _b;
             (_a = props.onReady) === null || _a === void 0 ? void 0 : _a.call(props, tileset);
-            if (props.isZoomTo) {
+            if (props.isZoomTo === true) {
                 void mapViewer.zoomTo(tileset);
             }
-            if (props.heightFromGround) {
-                var cartographic = cesium_1.Cartographic.fromCartesian(tileset.boundingSphere.center);
-                var surface = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
-                var offset = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, props.heightFromGround);
+            var scene = mapViewer.scene;
+            scene.globe.depthTestAgainstTerrain = true;
+            var cartographic = cesium_1.Cartographic.fromCartesian(tileset.boundingSphere.center);
+            var heightFromGround = (_b = props.heightFromGround) !== null && _b !== void 0 ? _b : GROUND_LEVEL;
+            if (heightFromGround) {
+                var surface = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
+                var offset = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + heightFromGround);
                 var translation = cesium_1.Cartesian3.subtract(offset, surface, new cesium_1.Cartesian3());
                 tileset.modelMatrix = cesium_1.Matrix4.fromTranslation(translation);
             }

package/dist/cesium-map/layers/3d.tileset.with.update.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface Cesium3DTilesetWithUpdateProps {
+    url: string;
+    withUpdate?: boolean;
+}
+export declare const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps>;

package/dist/cesium-map/layers/3d.tileset.with.update.js

@@ -0,0 +1,115 @@
+"use strict";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/*
+   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
+*/
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cesium3DTilesetWithUpdate = void 0;
+var react_1 = __importStar(require("react"));
+var cesium_1 = require("cesium");
+var map_1 = require("../map");
+var Cesium3DTilesetWithUpdate = function (_a) {
+    var url = _a.url, withUpdate = _a.withUpdate;
+    var mapViewer = map_1.useCesiumMap();
+    var scene = mapViewer.scene;
+    var cesium3DTileset = react_1.useState(new cesium_1.Cesium3DTileset({
+        url: url,
+    }))[0];
+    var tileset = react_1.useState(scene.primitives.add(cesium3DTileset))[0];
+    react_1.useEffect(function () {
+        scene.globe.depthTestAgainstTerrain = true;
+        void mapViewer.zoomTo(tileset);
+        if (withUpdate === true) {
+            updateTileset(tileset);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var updateContent = function (model, boundingVolume) {
+        var _a;
+        var height = boundingVolume.minimumHeight
+            ? boundingVolume.minimumHeight
+            : boundingVolume.center.z - boundingVolume.radius;
+        // @ts-ignore
+        var center = (_a = model._rtcCenter) !== null && _a !== void 0 ? _a : boundingVolume.center;
+        var normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new cesium_1.Cartesian3());
+        var offset = cesium_1.Cartesian3.multiplyByScalar(normal, height, new cesium_1.Cartesian3());
+        var carto = cesium_1.Cartographic.fromCartesian(center);
+        void new Promise(function (resolve, reject) {
+            // @ts-ignore
+            if (scene.terrainProvider._ready !== true) {
+                var result = __assign({}, carto);
+                result.height = 0;
+                resolve(result);
+            }
+            else {
+                void cesium_1.sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then(function (results) {
+                    var result = results[0];
+                    if (!cesium_1.defined(result)) {
+                        resolve(carto);
+                    }
+                    resolve(result);
+                });
+            }
+        }).then(function (result) {
+            var resultCartesian = cesium_1.Cartographic.toCartesian(result);
+            var position = cesium_1.Cartesian3.subtract(resultCartesian, offset, new cesium_1.Cartesian3());
+            // @ts-ignore
+            model._rtcCenter = cesium_1.Cartesian3.clone(position, model._rtcCenter);
+        });
+    };
+    var updateTile = function (tile) {
+        if (tile.content !== undefined) {
+            // @ts-ignore
+            updateContent(tile.content, tile.boundingVolume.boundingVolume);
+        }
+        else {
+            var listener_1 = tileset.tileLoad.addEventListener(function (t) {
+                if (t === tile) {
+                    updateContent(t.content, t.boundingVolume.boundingVolume);
+                    listener_1();
+                }
+            });
+        }
+        tile.children.forEach(function (child) { return updateTile(child); });
+    };
+    var updateTileset = function (tileset) {
+        void tileset.readyPromise.then(function () {
+            updateTile(tileset.root);
+        });
+    };
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.Cesium3DTilesetWithUpdate = Cesium3DTilesetWithUpdate;

package/dist/cesium-map/tools/terranian-height.tool.js

@@ -44,6 +44,7 @@ var TerrainianHeightTool = function (props) {
             console.log('Loaded CSV content:\n', text);
             void cesium_1.sampleTerrainMostDetailed(mapViewer.terrainProvider, parsed.map(function (item) { return item.cartographic; })).then(function (updatedPositions) {
                 console.log(updatedPositions);
+                updatedPositions = updatedPositions.slice(0, updatedPositions.length - 1); // UNIX brake line
                 mapViewer.scene.globe.depthTestAgainstTerrain = true;
                 mapViewer.entities.suspendEvents();
                 mapViewer.entities.removeAll();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.10.5",
+  "version": "3.11.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "3c0fc22a8e42017e804bdc95c10d797eb898b7cb",
+  "gitHead": "52e983d1180b9fc19719b68e4bbc8745cf5d4581",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/layers/3d.tileset.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { ArcGISTiledElevationTerrainProvider } from 'cesium';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
 import { CesiumMap } from '../map';
+import { LayerType } from '../layers-manager';
 import { Cesium3DTileset } from './3d.tileset';
 
 export default {
@@ -18,12 +20,43 @@ const mapDivStyle = {
   position: 'absolute' as const,
 };
 
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
 export const Cesium3DTilesetLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
       <Cesium3DTileset
         isZoomTo={true}
-        url="/mock/tileset/tileset.json"
+        url="/mock/tileset_1/tileset.json"
         onAllTilesLoad={action('onAllTilesLoad')}
         onInitialTilesLoad={action('onInitialTilesLoad')}
         onTileFailed={action('onTileFailed')}
@@ -39,6 +72,9 @@ export const Cesium3DTilesetLayer: Story = (args: unknown) => (
 );
 
 Cesium3DTilesetLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
   zoom: {
     defaultValue: 3,
     control: {
@@ -49,13 +85,17 @@ Cesium3DTilesetLayer.argTypes = {
   },
 };
 
-export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
+Cesium3DTilesetLayer.storyName = '3D Layer';
+
+export const Cesium3DTilesetWithHeightCorrectionLayer: Story = (
+  args: unknown
+) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
       <Cesium3DTileset
         isZoomTo={false}
-        heightFromGround={-170}
-        url="/mock/tileset/tileset.json"
+        heightFromGround={-10}
+        url="/mock/tileset_1/tileset.json"
         onAllTilesLoad={action('onAllTilesLoad')}
         onInitialTilesLoad={action('onInitialTilesLoad')}
         onTileFailed={action('onTileFailed')}
@@ -70,9 +110,12 @@ export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
   </div>
 );
 
-Cesium3DTilesetOnHeightLayer.argTypes = {
+Cesium3DTilesetWithHeightCorrectionLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
   zoom: {
-    defaultValue: 18,
+    defaultValue: 17,
     control: {
       type: 'range',
       min: 0,
@@ -84,6 +127,9 @@ Cesium3DTilesetOnHeightLayer.argTypes = {
   },
 };
 
+Cesium3DTilesetWithHeightCorrectionLayer.storyName =
+  '3D with Height Correction Layer';
+
 export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
@@ -96,6 +142,12 @@ export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
 );
 
 CesiumSolar3DTilesetLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
+  terrainProvider: {
+    defaultValue: ArcGisProvider,
+  },
   center: {
     defaultValue: [34.811, 31.908],
   },
@@ -108,3 +160,5 @@ CesiumSolar3DTilesetLayer.argTypes = {
     },
   },
 };
+
+CesiumSolar3DTilesetLayer.storyName = 'Solar 3D Layer with Terrain Provider';

package/src/lib/cesium-map/layers/3d.tileset.tsx

@@ -1,10 +1,11 @@
-import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
 import React from 'react';
-
+import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
 import { Cesium3DTileset as Resium3DTileset } from 'resium';
 import { Cesium3DTilesetProps } from 'resium/dist/types/src/Cesium3DTileset/Cesium3DTileset';
 import { CesiumViewer, useCesiumMap } from '../map';
 
+const GROUND_LEVEL = 0.0;
+
 export interface RCesium3DTilesetProps extends Cesium3DTilesetProps {
   isZoomTo?: boolean;
   heightFromGround?: number;
@@ -17,22 +18,25 @@ export const Cesium3DTileset: React.FC<RCesium3DTilesetProps> = (props) => {
       {...props}
       onReady={(tileset): void => {
         props.onReady?.(tileset);
-        if (props.isZoomTo) {
+        if (props.isZoomTo === true) {
           void mapViewer.zoomTo(tileset);
         }
-        if (props.heightFromGround) {
-          const cartographic = Cartographic.fromCartesian(
-            tileset.boundingSphere.center
-          );
+        const scene = mapViewer.scene;
+        scene.globe.depthTestAgainstTerrain = true;
+        const cartographic = Cartographic.fromCartesian(
+          tileset.boundingSphere.center
+        );
+        const heightFromGround = props.heightFromGround ?? GROUND_LEVEL;
+        if (heightFromGround) {
           const surface = Cartesian3.fromRadians(
             cartographic.longitude,
             cartographic.latitude,
-            0.0
+            cartographic.height
           );
           const offset = Cartesian3.fromRadians(
             cartographic.longitude,
             cartographic.latitude,
-            props.heightFromGround
+            cartographic.height + heightFromGround
           );
           const translation = Cartesian3.subtract(
             offset,

package/src/lib/cesium-map/layers/3d.tileset.with.update.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/*
+   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
+*/
+
+import React, { useEffect, useState } from 'react';
+import {
+  Cesium3DTileset,
+  Cesium3DTile,
+  Cartographic,
+  Cartesian3,
+  defined,
+  sampleTerrainMostDetailed,
+  Cesium3DTileContent,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface Cesium3DTilesetWithUpdateProps {
+  url: string;
+  withUpdate?: boolean;
+}
+
+export const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps> = ({
+  url,
+  withUpdate,
+}) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+  const scene = mapViewer.scene;
+  const [cesium3DTileset] = useState<Cesium3DTileset>(
+    new Cesium3DTileset({
+      url: url,
+    })
+  );
+  const [tileset] = useState<Cesium3DTileset>(
+    scene.primitives.add(cesium3DTileset)
+  );
+
+  useEffect(() => {
+    scene.globe.depthTestAgainstTerrain = true;
+    void mapViewer.zoomTo(tileset);
+    if (withUpdate === true) {
+      updateTileset(tileset);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updateContent = (
+    model: Cesium3DTileContent,
+    boundingVolume: any
+  ): void => {
+    const height = boundingVolume.minimumHeight
+      ? boundingVolume.minimumHeight
+      : boundingVolume.center.z - boundingVolume.radius;
+    // @ts-ignore
+    const center = model._rtcCenter ?? boundingVolume.center;
+    const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(
+      center,
+      new Cartesian3()
+    );
+    const offset = Cartesian3.multiplyByScalar(
+      normal,
+      height,
+      new Cartesian3()
+    );
+    const carto = Cartographic.fromCartesian(center);
+    void new Promise((resolve, reject) => {
+      // @ts-ignore
+      if (scene.terrainProvider._ready !== true) {
+        const result = { ...carto };
+        result.height = 0;
+        resolve(result);
+      } else {
+        void sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then(
+          (results) => {
+            const result = results[0];
+            if (!defined(result)) {
+              resolve(carto);
+            }
+            resolve(result);
+          }
+        );
+      }
+    }).then((result) => {
+      const resultCartesian = Cartographic.toCartesian(result as Cartographic);
+      const position = Cartesian3.subtract(
+        resultCartesian,
+        offset,
+        new Cartesian3()
+      );
+      // @ts-ignore
+      model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
+    });
+  };
+
+  const updateTile = (tile: Cesium3DTile): void => {
+    if (tile.content !== undefined) {
+      // @ts-ignore
+      updateContent(tile.content, tile.boundingVolume.boundingVolume);
+    } else {
+      const listener = tileset.tileLoad.addEventListener((t) => {
+        if (t === tile) {
+          updateContent(t.content, t.boundingVolume.boundingVolume);
+          listener();
+        }
+      });
+    }
+    tile.children.forEach((child) => updateTile(child));
+  };
+
+  const updateTileset = (tileset: Cesium3DTileset): void => {
+    void tileset.readyPromise.then(() => {
+      updateTile(tileset.root);
+    });
+  };
+
+  return <></>;
+};

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -1,17 +1,18 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import React, { useState } from 'react';
 import {
   ArcGISTiledElevationTerrainProvider,
   EllipsoidTerrainProvider,
-  TerrainProvider,
   CesiumTerrainProvider,
   Resource,
+  TerrainProvider,
 } from 'cesium';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumMap, CesiumViewer, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
-import { Cesium3DTileset } from '../layers';
 import { InspectorTool } from '../tools/inspector.tool';
 import { TerrainianHeightTool } from '../tools/terranian-height.tool';
+import { Cesium3DTileset } from '../layers';
 import { LayerType } from '../layers-manager';
 
 export default {
@@ -56,19 +57,41 @@ const BASE_MAPS = {
 
 const EllipsoidProvider = new EllipsoidTerrainProvider({});
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const MCCesiumProviderMercator = new CesiumTerrainProvider({
-  url: new Resource({
-    url: 'http://localhost:3000/terrain_mercator_crop',
-  }),
-});
+//#region TILER MATERIALS
+// const TTCesiumProviderSrtm30 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:8002/srtm30',
+//   }),
+// });
+// const TTCesiumProviderSrtm100 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:8002/srtm100',
+//   }),
+// });
+// const TTCesiumProviderMergedDescending = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:8002/mergedDescending',
+//   }),
+// });
+//#endregion
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const MCCesiumProviderW84 = new CesiumTerrainProvider({
-  url: new Resource({
-    url: 'http://localhost:3000/terrain_w84_geo_crop',
-  }),
-});
+//#region CTBD MATERIALS
+// const CTBDCesiumProviderSrtm30 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:3000/srtm30',
+//   }),
+// });
+// const CTBDCesiumProviderSrtm100 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:3000/srtm100',
+//   }),
+// });
+// const CTBDCesiumProviderMergedAscending = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:3000/mergedAscending',
+//   }),
+// });
+//#endregion
 
 const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
   url:
@@ -80,14 +103,6 @@ const terrainProviderListQmesh = [
     id: 'NONE',
     value: EllipsoidProvider,
   },
-  {
-    id: 'MC Mercator - Cesium Terrain Provider',
-    value: MCCesiumProviderMercator,
-  },
-  {
-    id: 'MC W84 - Cesium Terrain Provider',
-    value: MCCesiumProviderW84,
-  },
   {
     id: 'Arc Gis Terrain Provider',
     value: ArcGisProvider,
@@ -106,7 +121,7 @@ interface ITerrainProviderSelectorProps {
 const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   terrainProviderList,
 }) => {
-  const mapViewer = useCesiumMap();
+  const mapViewer: CesiumViewer = useCesiumMap();
 
   return (
     <>
@@ -129,7 +144,7 @@ const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
 };
 
 export const QuantizedMeshHeightsTool: Story = () => {
-  const [center] = useState<[number, number]>([-122, 43]);
+  const [center] = useState<[number, number]>([34.817, 31.911]);
   return (
     <div style={mapDivStyle}>
       <CesiumMap
@@ -140,8 +155,8 @@ export const QuantizedMeshHeightsTool: Story = () => {
         baseMaps={BASE_MAPS}
       >
         <Cesium3DTileset
-          isZoomTo={true}
           url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
+          isZoomTo={true}
         />
         <TerrainProviderSelector
           terrainProviderList={terrainProviderListQmesh}

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -14,6 +14,7 @@ import { CesiumMap, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
 import { Cesium3DTileset } from '../layers';
 import { LayerType } from '../layers-manager';
+import { InspectorTool } from '../tools/inspector.tool';
 import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
 
 export default {
@@ -122,8 +123,8 @@ interface ITerrainProviderSelectorProps {
 const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   terrainProviderList,
 }) => {
-  const mapViewer = useCesiumMap();
   const [depthTest, setDepthTest] = useState<boolean>(false);
+  const mapViewer = useCesiumMap();
 
   const scene = mapViewer.scene;
 
@@ -178,6 +179,7 @@ export const QuantizedMeshProviders: Story = () => {
           url="/mock/tileset_2/L16_31023/L16_31023.json"
         />
         <TerrainProviderSelector terrainProviderList={terrainProviderList} />
+        <InspectorTool />
       </CesiumMap>
     </div>
   );

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -69,6 +69,10 @@ export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
       ).then(
         (updatedPositions) => {
           console.log(updatedPositions);
+          updatedPositions = updatedPositions.slice(
+            0,
+            updatedPositions.length - 1
+          ); // UNIX brake line
 
           mapViewer.scene.globe.depthTestAgainstTerrain = true;
           mapViewer.entities.suspendEvents();

package/dist/cesium-map/layers/3d.tileset.update.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cesium-map/layers/3d.tileset.update.js

@@ -1,5 +0,0 @@
-"use strict";
-/*
-   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
-*/
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/lib/cesium-map/layers/3d.tileset.update.ts

@@ -1,72 +0,0 @@
-/*
-   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
-*/
-
-/*
-import {
-  Cesium3DTileset,
-  Cesium3DTile,
-  Cartographic,
-  Cartesian3,
-  defined,
-  sampleTerrainMostDetailed,
-} from 'cesium';
-
-const updateTile = (tile: Cesium3DTile): void => {
-  const boundingVolume = tile.boundingVolume;
-  if (defined(tile.contentBoundingVolume)) {
-    boundingVolume = tile.contentBoundingVolume;
-  }
-  const content = tile.content;
-  const model = content._model;
-  const height = boundingVolume.minimumHeight;
-  const center = model._rtcCenter;
-  const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new Cartesian3());
-  const offset = Cartesian3.multiplyByScalar(normal, height, new Cartesian3());
-  const carto = Cartographic.fromCartesian(center);
-  const promise = when.defer();
-  if (scene.terrainProvider === ellipsoidTerrainProvider) {
-    const result = carto;
-    result.height = 0;
-    promise.resolve(result);
-  } else {
-    promise = sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then((results) => {
-      const result = results[0];
-      if (!defined(result)) {
-        return carto;
-      }
-      return result;
-    });
-  }
-  promise.then((result) => {
-    result = Cartographic.toCartesian(result);
-    const position = Cartesian3.subtract(result, offset, new Cartesian3());
-    model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
-  });
-};
-
-const updateTileset = (root: Cesium3DTile): void => {
-  if (root.contentReady) {
-    updateTile(root);
-  } else {
-    const listener = (tileset as Cesium3DTileset).tileLoad.addEventListener(
-      (tile: Cesium3DTile) => {
-        if (tile === root) {
-          updateTile(tile);
-          listener();
-        }
-      }
-    );
-  }
-  const children = root.children;
-  const length = children.length;
-  for (let i = 0; i < length; ++i) {
-    updateTileset(children[i]);
-  }
-};
-
-export const update = (tileset: Cesium3DTileset): void => {
-  updateTileset(tileset.root);
-};
-*/
-export {};

package/storybook-static/mock/tileset_1/tileset.json

@@ -1,124 +0,0 @@
-{
-    "asset": {
-      "version": "1.0",
-      "tilesetVersion": "1.2.3"
-    },
-    "extras": {
-      "name": "Sample Tileset"
-    },
-    "properties": {
-      "id": {
-        "minimum": 0,
-        "maximum": 9
-      },
-      "Longitude": {
-        "minimum": -1.3197192952275933,
-        "maximum": -1.319644104024109
-      },
-      "Latitude": {
-        "minimum": 0.698848878034009,
-        "maximum": 0.6989046192460953
-      },
-      "Height": {
-        "minimum": 6.161747192963958,
-        "maximum": 85.41026367992163
-      }
-    },
-    "geometricError": 240,
-    "root": {
-      "boundingVolume": {
-        "region": [
-          -1.3197209591796106,
-          0.6988424218,
-          -1.3196390408203893,
-          0.6989055782,
-          0,
-          88
-        ]
-      },
-      "geometricError": 70,
-      "refine": "ADD",
-      "content": {
-        "uri": "parent.b3dm",
-        "boundingVolume": {
-          "region": [
-            -1.3197004795898053,
-            0.6988582109,
-            -1.3196595204101946,
-            0.6988897891,
-            0,
-            88
-          ]
-        }
-      },
-      "children": [
-        {
-          "boundingVolume": {
-            "region": [
-              -1.3197209591796106,
-              0.6988424218,
-              -1.31968,
-              0.698874,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "ll.b3dm"
-          }
-        },
-        {
-          "boundingVolume": {
-            "region": [
-              -1.31968,
-              0.6988424218,
-              -1.3196390408203893,
-              0.698874,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "lr.b3dm"
-          },
-          "extras": {
-            "id": "Special Tile"
-          }
-        },
-        {
-          "boundingVolume": {
-            "region": [
-              -1.31968,
-              0.698874,
-              -1.3196390408203893,
-              0.6989055782,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "ur.b3dm"
-          }
-        },
-        {
-          "boundingVolume": {
-            "region": [
-              -1.3197209591796106,
-              0.698874,
-              -1.31968,
-              0.6989055782,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "ul.b3dm"
-          }
-        }
-      ]
-    }
-  }