Light underground floors support (#26)

* Light underground floors support * 1.3.0
2gis · Oct 3, 2023 · e11db1b · e11db1b
1 parent 81c4dfa
commit e11db1b
Show file tree

Hide file tree

Showing 10 changed files with 243 additions and 110 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -35,6 +35,7 @@ async function start() {
         hoverHighlight: {
             intencity: 0.1,
         },
+        groundCoveringColor: 'rgba(233, 232, 220, 0.8)',
     });
 
     (window as any).gltfPlugin = plugin;

diff --git a/demo/mocks.ts b/demo/mocks.ts
@@ -8,7 +8,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
         rotateX: 90,
         rotateY: -15.1240072739039,
         scale: 191.637678,
-        linkedIds: ['70030076555821177'],
+        linkedIds: ['70030076555823021'],
         mapOptions: {
             center: [47.24547737708662, 56.134591508663135],
             pitch: 40,
@@ -83,6 +83,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 id: '000034',
                 text: '11',
                 modelUrl: 'zgktechnology1_floor11.glb',
+                isUnderground: true,
                 mapOptions: {
                     center: [47.24556663327373, 56.13456998211929],
                     pitch: 40,
@@ -146,7 +147,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
         rotateX: 90,
         rotateY: -15.1240072739039,
         scale: 191.637678,
-        linkedIds: ['70030076555823021'],
+        linkedIds: ['70030076555821177'],
         mapOptions: {
             center: [47.245008950283065, 56.1344698491912],
             pitch: 45,
@@ -163,6 +164,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
                 id: 'aaa777',
                 text: '2-15',
                 modelUrl: 'zgktechnology2_floor2.glb',
+                isUnderground: true,
                 mapOptions: {
                     center: [47.24463456947374, 56.134675042798094],
                     pitch: 35,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,14 +1,17 @@
 {
   "name": "@2gis/mapgl-gltf",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Plugin for the rendering glTF models with MapGL",
   "main": "dist/bundle.js",
   "typings": "dist/types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/2gis/mapgl-gltf.git"
   },
-  "files": ["dist/libs", "dist/types"],
+  "files": [
+    "dist/libs",
+    "dist/types"
+  ],
   "scripts": {
     "build": "npm run build:bundle && npm run build:typings && npm run build:transpile && npm run build:docs",
     "build:bundle": "webpack --env type=production",

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,32 @@
+import type { GeoJsonSourceOptions } from '@2gis/mapgl/types';
+
+export const GROUND_COVERING_SOURCE_DATA: GeoJsonSourceOptions['data'] = {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+        type: 'Polygon',
+        coordinates: [
+            [
+                [-180, -85],
+                [180, -85],
+                [180, 85],
+                [-180, 85],
+                [-180, -85],
+            ],
+        ],
+    },
+};
+
+export const GROUND_COVERING_SOURCE_PURPOSE = '__mapglPlugins_mapgl-gltf';
+export const GROUND_COVERING_LAYER = {
+    id: '__mapglPlugins_mapgl-gltf',
+    type: 'polygon',
+    style: {
+        color: ['to-color', ['sourceAttr', 'color']],
+    },
+    filter: [
+        'all',
+        ['match', ['sourceAttr', 'purpose'], [GROUND_COVERING_SOURCE_PURPOSE], true, false],
+        ['to-boolean', ['sourceAttr', 'color']],
+    ],
+};
diff --git a/src/defaultOptions.ts b/src/defaultOptions.ts
@@ -25,4 +25,5 @@ export const defaultOptions: Required<PluginOptions> = {
     floorsControl: {
         position: 'centerLeft',
     },
+    groundCoveringColor: '#F8F8EBCC',
 };
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -18,6 +18,7 @@ import type {
 import type { BuildingOptions } from './types/realtyScene';
 import type { GltfPluginEventTable } from './types/events';
 import { applyOptionalDefaults, disposeObject } from './utils/common';
+import { GROUND_COVERING_LAYER } from './constants';
 
 export class GltfPlugin extends Evented<GltfPluginEventTable> {
     private isThreeJsInitialized = false;
@@ -99,7 +100,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
             this.map.setHiddenObjects(hiddenIds);
         }
 
-        this.addThreeJsLayer();
+        this.addLayers();
         this.poiGroups.onMapStyleUpdate();
     };
 
@@ -120,6 +121,18 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
         return Array.from(this.linkedIds);
     }
 
+    public setOptions(pluginOptions: Pick<Required<PluginOptions>, 'groundCoveringColor'>) {
+        Object.keys(pluginOptions).forEach((option) => {
+            switch (option) {
+                case 'groundCoveringColor': {
+                    this.options.groundCoveringColor = pluginOptions.groundCoveringColor;
+                    this.realtyScene?.resetGroundCoveringColor();
+                    break;
+                }
+            }
+        });
+    }
+
     /**
      * Add the list of models to the map
      * Use this method if you want to add
@@ -338,6 +351,10 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
             this.viewport.height * window.devicePixelRatio,
         );
 
+        if (this.realtyScene?.isUndergroundFloorShown()) {
+            this.renderer.clearDepth();
+        }
+
         this.renderer.render(this.scene, this.camera);
     }
 
@@ -366,7 +383,8 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
         this.onPluginInit();
     }
 
-    private addThreeJsLayer() {
+    private addLayers() {
+        this.map.addLayer(GROUND_COVERING_LAYER);
         this.map.addLayer({
             id: 'gltf-plugin-style-layer',
             type: 'custom',