@twinmatrix/spatialverse-sdk-web 0.0.2 → 0.0.3

package/lib/cjs/meta-atlas-sdk/3DMap/MainMap.js

@@ -3,295 +3,265 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _CustomThreeJsWrapper = _interopRequireDefault(require("./CustomThreeJsWrapper/CustomThreeJsWrapper"));
+exports.default = void 0;
+var _CustomThreeJsWrapper = _interopRequireDefault(require("./CustomThreeJsWrapper/CustomThreeJsWrapper.js"));
 var _troikaThreeText = require("troika-three-text");
 var turf = _interopRequireWildcard(require("@turf/turf"));
 var THREE = _interopRequireWildcard(require("three"));
-var _utils = require("./CustomThreeJsWrapper/utility/utils");
+var _utils = require("./CustomThreeJsWrapper/utility/utils.js");
 var _threeSpritetext = _interopRequireDefault(require("three-spritetext"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var MainMap = exports["default"] = /*#__PURE__*/function () {
-  function MainMap(metaAtlasCore) {
-    var _this = this;
-    _classCallCheck(this, MainMap);
-    _defineProperty(this, "getAllPolygonCoordinates", function () {
-      var map = _this.map;
-      if (!map) return [];
-      var polygonFeatures = [];
-      var source = map.getSource('custom');
-      if (source) {
-        var features = map.querySourceFeatures('custom', {
-          sourceLayer: 'geojson',
-          filter: ['==', ['geometry-type'], 'Polygon']
-        });
-        if (features && features.length > 0) {
-          features.forEach(function (feature) {
-            if ((feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') && feature.properties.dimension_what === 'what.booth') {
-              var _feature$properties;
-              polygonFeatures.push({
-                id: feature.properties.mapObjectId,
-                name: ((_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties.title) || 'Unnamed Polygon',
-                coordinates: feature.geometry.coordinates,
-                properties: _objectSpread(_objectSpread({}, feature.properties), {}, {
-                  hasImage: !!Math.round(Math.random())
-                })
-              });
-            }
-          });
-        }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MainMap {
+  static mainInstance = null;
+  constructor(metaAtlasCore) {
+    if (MainMap.mainInstance) {
+      return MainMap.mainInstance;
+    }
+    MainMap.mainInstance = this;
+    this.metaAtlasCore = metaAtlasCore;
+  }
+  init(map2D) {
+    this.map = map2D;
+    this.initThreebox();
+  }
+
+  /**
+   * Creates a Threebox instance of the class.
+   * @param map Maplibre instance to initialize threebox
+   * @returns Threebox class instance created
+   */
+  initThreebox() {
+    const map = this.map;
+    const wrapper = new _CustomThreeJsWrapper.default(map);
+    wrapper.setEnvironment();
+    // const hdrLoader = new HDRLoader();
+    // hdrLoader.load('./golden_gate_hills_1k.hdr', texture => {
+    //   texture.mapping = EquirectangularReflectionMapping;
+    //   wrapper.scene.environment = texture;
+    // });
+
+    map.addLayer({
+      id: '3d-model-layer',
+      type: 'custom',
+      renderingMode: '3d',
+      onAdd: () => {
+        console.log('onAdd _initThreebox');
+      },
+      render: () => {
+        wrapper.update();
       }
-      return polygonFeatures;
     });
-    _defineProperty(this, "updatePolygons", function (features) {
-      features.map(/*#__PURE__*/function () {
-        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(feature) {
-          var coordinates, polygon, centroid, myText, text, textPosition;
-          return _regenerator().w(function (_context) {
-            while (1) switch (_context.n) {
-              case 0:
-                coordinates = feature.geometry.coordinates; // const centroid = feature.properties.center;
-                polygon = turf.polygon(coordinates);
-                centroid = turf.centroid(polygon).geometry.coordinates; // const modelPosition = projectToWorld(centroid);
-                // const vertex1 = projectToWorld(coordinates[0][0]);
-                // const vertex2 = projectToWorld(coordinates[0][1]);
-                // const angle = vertex1.angleTo(vertex2);
-                // console.log(angle);
-                // await modelLoader.loadModel({
-                //   modelPath: feature.properties.modelPath,
-                //   feature,
-                //   wrapper: wrapper.current!,
-                //   onProgress: (progress) => {
-                //     setLoadingProgress((prev) => ({
-                //       ...prev,
-                //       [feature.properties.id]: progress,
-                //     }));
-                //   },
-                //   onError: (error) => {
-                //     console.error(
-                //       `Failed to load model ${feature.properties.id}:`,
-                //       error
-                //     );
-                //   },
-                // });
-                if (!feature.properties.hasImage && feature.properties.dimension_where && feature.properties.dimension_where === 'where.lima.mahsuri_center.exhibition_floor') {
-                  myText = new _threeSpritetext["default"]();
-                  myText.color = 'black';
-                  text = feature.properties.title;
-                  text = _this.addNewLine(text);
+    this.threebox = wrapper;
+    return wrapper;
+  }
 
-                  // Set properties to configure:
-                  myText.text = text;
-                  myText.textHeight = 100;
-                  // myText.textHeight = 1;
-                  // myText.backgroundColor = '';
-                  textPosition = (0, _utils.projectToWorld)(centroid);
-                  myText.rotation.x = Math.PI;
-                  myText.rotation.y = Math.PI;
-                  myText.scale.set(0.1, 0.1, 0.01);
-                  myText.position.set(textPosition.x, textPosition.y,
-                  // feature.properties.height > 0 ? 0.4 : 0.25
-                  0.1);
-                  _this.threebox.add(myText);
-                } else {
-                  // Load Texture
-                  // const textureLoader = new THREE.TextureLoader();
-                  // textureLoader.load('/sk.png', (texture: THREE.Texture) => {
-                  //   // Create a plane geometry and material with the loaded texture
-                  //   const geometry = new THREE.PlaneGeometry(
-                  //     texture.image.width,
-                  //     texture.image.height
-                  //   );
-                  //   geometry.computeBoundingBox();
-                  //   const material = new THREE.MeshStandardMaterial({
-                  //     map: texture,
-                  //     transparent: true, // Enable transparency
-                  //     opacity: 1,
-                  //   });
-                  //   const plane = new THREE.Mesh(geometry, material);
-                  //   const group = new THREE.Group();
-                  //   const childContainer = new THREE.Group();
-                  //   childContainer.add(plane);
-                  //   childContainer.rotateZ(Math.PI / 2);
-                  //   childContainer.rotateZ(1);
-                  //   childContainer.updateMatrixWorld();
-                  //   group.add(childContainer);
-                  //   const geojsonbbox = turf.bbox(polygon);
-                  //   const bbox1 = new THREE.Box3(
-                  //     projectToWorld([geojsonbbox[2], geojsonbbox[3]]),
-                  //     projectToWorld([geojsonbbox[0], geojsonbbox[1]])
-                  //   );
-                  //   const bbox2 = new THREE.Box3().setFromObject(plane);
-                  //   const size1 = new THREE.Vector3();
-                  //   bbox1.getSize(size1);
-                  //   size1.setZ(1);
-                  //   const size2 = new THREE.Vector3();
-                  //   bbox2.getSize(size2);
-                  //   size2.setZ(1);
-                  //   const ratio = size1.divide(size2);
-                  //   const ratioCopy = ratio.clone().multiplyScalar(0.85);
-                  //   plane.scale.set(
-                  //     plane.scale.x * ratioCopy.x,
-                  //     plane.scale.y * ratioCopy.y,
-                  //     plane.scale.z * ratioCopy.z
-                  //   );
-                  //   // // Set the position of the plane to the centroid
-                  //   group.position.set(modelPosition.x, modelPosition.y, 0.11);
-                  //   this.threebox.add(group);
-                  // });
-                }
-              case 1:
-                return _context.a(2);
-            }
-          }, _callee);
-        }));
-        return function (_x) {
-          return _ref.apply(this, arguments);
-        };
-      }());
-    });
-    _defineProperty(this, "addLogo", function (logo, position) {
-      var textureLoader = new THREE.TextureLoader();
-      var texture = textureLoader.load(logo);
+  /**
+   * Get the threebox instance for 3D model operations
+   */
+  getThreebox() {
+    return this.threebox;
+  }
+  getAllPolygonCoordinates = () => {
+    const map = this.map;
+    if (!map) return [];
+    const polygonFeatures = [];
+    const source = map.getSource('custom');
+    if (source) {
+      const features = map.querySourceFeatures('custom', {
+        sourceLayer: 'geojson',
+        filter: ['==', ['geometry-type'], 'Polygon']
+      });
+      if (features && features.length > 0) {
+        features.forEach(feature => {
+          if ((feature.geometry.type === 'Polygon' || feature.geometry.type === 'MultiPolygon') && feature.properties.dimension_what === 'what.booth') {
+            polygonFeatures.push({
+              id: feature.properties.mapObjectId,
+              name: feature.properties?.title || 'Unnamed Polygon',
+              coordinates: feature.geometry.coordinates,
+              properties: {
+                ...feature.properties,
+                hasImage: !!Math.round(Math.random())
+              }
+            });
+          }
+        });
+      }
+    }
+    return polygonFeatures;
+  };
+  addNewLine(input) {
+    return input.replace(/ /g, '\r\n');
+  }
+  updatePolygons = features => {
+    features.map(async feature => {
+      const coordinates = feature.geometry.coordinates;
+      // const centroid = feature.properties.center;
+      const polygon = turf.polygon(coordinates);
+      const centroid = turf.centroid(polygon).geometry.coordinates;
+      // const modelPosition = projectToWorld(centroid);
 
-      // Define rectangle dimensions
-      var width = 4;
-      var height = 0;
-      var depth = 2;
+      // const vertex1 = projectToWorld(coordinates[0][0]);
+      // const vertex2 = projectToWorld(coordinates[0][1]);
+      // const angle = vertex1.angleTo(vertex2);
+      // console.log(angle);
 
-      // Create a box geometry instead of cylinder
-      var geometry = new THREE.BoxGeometry(width, height, depth);
+      // await modelLoader.loadModel({
+      //   modelPath: feature.properties.modelPath,
+      //   feature,
+      //   wrapper: wrapper.current!,
+      //   onProgress: (progress) => {
+      //     setLoadingProgress((prev) => ({
+      //       ...prev,
+      //       [feature.properties.id]: progress,
+      //     }));
+      //   },
+      //   onError: (error) => {
+      //     console.error(
+      //       `Failed to load model ${feature.properties.id}:`,
+      //       error
+      //     );
+      //   },
+      // });
 
-      // Create materials: [right, left, top, bottom, front, back]
-      var sideMaterial = new THREE.MeshBasicMaterial({
-        color: new THREE.Color(0xffffff)
-      });
-      var topMaterial = new THREE.MeshStandardMaterial({
-        map: texture,
-        side: THREE.DoubleSide,
-        transparent: true
-      });
+      if (!feature.properties.hasImage && feature.properties.dimension_where && feature.properties.dimension_where === 'where.lima.mahsuri_center.exhibition_floor') {
+        const myText = new _threeSpritetext.default();
+        myText.color = 'black';
+        let text = feature.properties.title;
+        text = this.addNewLine(text);
 
-      // Create an array of materials for each face of the box
-      var materials = [sideMaterial,
-      // right
-      sideMaterial,
-      // left
-      topMaterial,
-      // top (with logo texture)
-      sideMaterial,
-      // bottom
-      sideMaterial,
-      // front
-      sideMaterial // back
-      ];
+        // Set properties to configure:
+        myText.text = text;
+        myText.textHeight = 100;
+        // myText.textHeight = 1;
+        // myText.backgroundColor = '';
+        const textPosition = (0, _utils.projectToWorld)(centroid);
+        myText.rotation.x = Math.PI;
+        myText.rotation.y = Math.PI;
+        myText.scale.set(0.1, 0.1, 0.01);
+        myText.position.set(textPosition.x, textPosition.y,
+        // feature.properties.height > 0 ? 0.4 : 0.25
+        0.1);
+        this.threebox.add(myText);
+      } else {
+        // Load Texture
+        // const textureLoader = new THREE.TextureLoader();
+        // textureLoader.load('/sk.png', (texture: THREE.Texture) => {
+        //   // Create a plane geometry and material with the loaded texture
+        //   const geometry = new THREE.PlaneGeometry(
+        //     texture.image.width,
+        //     texture.image.height
+        //   );
+        //   geometry.computeBoundingBox();
+        //   const material = new THREE.MeshStandardMaterial({
+        //     map: texture,
+        //     transparent: true, // Enable transparency
+        //     opacity: 1,
+        //   });
+        //   const plane = new THREE.Mesh(geometry, material);
+        //   const group = new THREE.Group();
+        //   const childContainer = new THREE.Group();
+        //   childContainer.add(plane);
+        //   childContainer.rotateZ(Math.PI / 2);
+        //   childContainer.rotateZ(1);
+        //   childContainer.updateMatrixWorld();
+        //   group.add(childContainer);
+        //   const geojsonbbox = turf.bbox(polygon);
+        //   const bbox1 = new THREE.Box3(
+        //     projectToWorld([geojsonbbox[2], geojsonbbox[3]]),
+        //     projectToWorld([geojsonbbox[0], geojsonbbox[1]])
+        //   );
+        //   const bbox2 = new THREE.Box3().setFromObject(plane);
+        //   const size1 = new THREE.Vector3();
+        //   bbox1.getSize(size1);
+        //   size1.setZ(1);
+        //   const size2 = new THREE.Vector3();
+        //   bbox2.getSize(size2);
+        //   size2.setZ(1);
+        //   const ratio = size1.divide(size2);
+        //   const ratioCopy = ratio.clone().multiplyScalar(0.85);
+        //   plane.scale.set(
+        //     plane.scale.x * ratioCopy.x,
+        //     plane.scale.y * ratioCopy.y,
+        //     plane.scale.z * ratioCopy.z
+        //   );
+        //   // // Set the position of the plane to the centroid
+        //   group.position.set(modelPosition.x, modelPosition.y, 0.11);
+        //   this.threebox.add(group);
+        // });
+      }
+    });
+  };
+  addLogo = (logo, position) => {
+    const textureLoader = new THREE.TextureLoader();
+    const texture = textureLoader.load(logo);
 
-      // Create the mesh with geometry and materials
-      var logoMesh = new THREE.Mesh(geometry, materials);
+    // Define rectangle dimensions
+    const width = 4;
+    const height = 0;
+    const depth = 2;
 
-      // Adjust rotation to match your previous orientation
-      logoMesh.rotation.x = Math.PI / 2;
-      logoMesh.rotation.y = -Math.PI / 1.45;
-      logoMesh.position.set(position.x + 0.5, position.y - 0.3, position.z);
-      _this.threebox.add(logoMesh);
-      return logoMesh;
+    // Create a box geometry instead of cylinder
+    const geometry = new THREE.BoxGeometry(width, height, depth);
+
+    // Create materials: [right, left, top, bottom, front, back]
+    const sideMaterial = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(0xffffff)
+    });
+    const topMaterial = new THREE.MeshStandardMaterial({
+      map: texture,
+      side: THREE.DoubleSide,
+      transparent: true
     });
-    // Function to add text using Troika Text library at a specified position
-    _defineProperty(this, "addTitle", function (title, position) {
-      // Create a new Text instance
-      var textMesh = new _troikaThreeText.Text();
 
-      // Configure text properties
-      textMesh.text = title;
-      textMesh.fontSize = 0.2;
-      textMesh.color = 0x000000;
-      textMesh.anchorX = '50%';
-      textMesh.anchorY = 'bottom-baseline';
-      textMesh.fontWeight = 'bold';
-      textMesh.textAlign = 'center';
-      textMesh.position.set(position.x, position.y, position.z);
-      textMesh.rotation.z = -Math.PI / 1.45;
+    // Create an array of materials for each face of the box
+    const materials = [sideMaterial,
+    // right
+    sideMaterial,
+    // left
+    topMaterial,
+    // top (with logo texture)
+    sideMaterial,
+    // bottom
+    sideMaterial,
+    // front
+    sideMaterial // back
+    ];
 
-      // Add text to the scene
-      _this.threebox.add(textMesh);
+    // Create the mesh with geometry and materials
+    const logoMesh = new THREE.Mesh(geometry, materials);
 
-      // Update the text rendering
-      textMesh.sync();
-      return textMesh;
-    });
-    if (MainMap.mainInstance) {
-      return MainMap.mainInstance;
-    }
-    MainMap.mainInstance = this;
-    this.metaAtlasCore = metaAtlasCore;
-  }
-  return _createClass(MainMap, [{
-    key: "init",
-    value: function init(map2D) {
-      this.map = map2D;
-      this.initThreebox();
-    }
+    // Adjust rotation to match your previous orientation
+    logoMesh.rotation.x = Math.PI / 2;
+    logoMesh.rotation.y = -Math.PI / 1.45;
+    logoMesh.position.set(position.x + 0.5, position.y - 0.3, position.z);
+    this.threebox.add(logoMesh);
+    return logoMesh;
+  };
 
-    /**
-     * Creates a Threebox instance of the class.
-     * @param map Maplibre instance to initialize threebox
-     * @returns Threebox class instance created
-     */
-  }, {
-    key: "initThreebox",
-    value: function initThreebox() {
-      var map = this.map;
-      var wrapper = new _CustomThreeJsWrapper["default"](map);
-      wrapper.setEnvironment();
-      // const hdrLoader = new HDRLoader();
-      // hdrLoader.load('./golden_gate_hills_1k.hdr', texture => {
-      //   texture.mapping = EquirectangularReflectionMapping;
-      //   wrapper.scene.environment = texture;
-      // });
+  // Function to add text using Troika Text library at a specified position
+  addTitle = (title, position) => {
+    // Create a new Text instance
+    const textMesh = new _troikaThreeText.Text();
 
-      map.addLayer({
-        id: '3d-model-layer',
-        type: 'custom',
-        renderingMode: '3d',
-        onAdd: function onAdd() {
-          console.log('onAdd _initThreebox');
-        },
-        render: function render() {
-          wrapper.update();
-        }
-      });
-      this.threebox = wrapper;
-      return wrapper;
-    }
+    // Configure text properties
+    textMesh.text = title;
+    textMesh.fontSize = 0.2;
+    textMesh.color = 0x000000;
+    textMesh.anchorX = '50%';
+    textMesh.anchorY = 'bottom-baseline';
+    textMesh.fontWeight = 'bold';
+    textMesh.textAlign = 'center';
+    textMesh.position.set(position.x, position.y, position.z);
+    textMesh.rotation.z = -Math.PI / 1.45;
 
-    /**
-     * Get the threebox instance for 3D model operations
-     */
-  }, {
-    key: "getThreebox",
-    value: function getThreebox() {
-      return this.threebox;
-    }
-  }, {
-    key: "addNewLine",
-    value: function addNewLine(input) {
-      return input.replace(/ /g, '\r\n');
-    }
-  }]);
-}();
-_defineProperty(MainMap, "mainInstance", null);
+    // Add text to the scene
+    this.threebox.add(textMesh);
+
+    // Update the text rendering
+    textMesh.sync();
+    return textMesh;
+  };
+}
+exports.default = MainMap;
 //# sourceMappingURL=MainMap.js.map