Replace material of gltf models

2gis · Jun 27, 2023 · 90b5816 · 90b5816
1 parent b351fe2
commit 90b5816
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -21,7 +21,6 @@ async function start() {
         modelsLoadStrategy: 'waitAll',
         modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
         dracoScriptsUrl: 'libs/draco/',
-        ambientLight: { color: '#ffffff', intencity: 2.5 },
         poiConfig: {
             primary: {
                 fontSize: 14,

diff --git a/src/defaultOptions.ts b/src/defaultOptions.ts
@@ -3,7 +3,7 @@ import type { PluginOptions } from './types/plugin';
 export const defaultOptions: Required<PluginOptions> = {
     ambientLight: {
         color: '#ffffff',
-        intencity: 1,
+        intencity: 3,
     },
     dracoScriptsUrl: 'https://unpkg.com/@2gis/mapgl-gltf@^1/dist/libs/draco/',
     modelsBaseUrl: '',

diff --git a/src/loader.ts b/src/loader.ts
@@ -60,6 +60,7 @@ export class Loader extends GLTFLoader {
                     });
 
                     const model = new THREE.Object3D();
+
                     model.add(gltf.scene);
 
                     // rotation
@@ -76,6 +77,18 @@ export class Loader extends GLTFLoader {
                     ];
                     model.position.set(mapPointCenter[0], mapPointCenter[1], mapPointCenter[2]);
 
+                    // Change material so that it can be highlighted
+                    model.traverse((obj) => {
+                        if (obj instanceof THREE.Mesh) {
+                            const newMaterial = new THREE.MeshStandardMaterial({
+                                map: obj.material.map,
+                            });
+                            obj.material = newMaterial;
+                            obj.material.emissive = new THREE.Color('#ffffff');
+                            obj.material.emissiveIntensity = 0.0;
+                        }
+                    });
+
                     const actualModelId = String(modelId);
                     try {
                         if (this.models.has(actualModelId)) {

diff --git a/src/realtyScene.ts b/src/realtyScene.ts
@@ -21,7 +21,7 @@ export class RealtyScene {
     private buildingFacadeIds: Id[] = [];
     // this field is needed when the hightlited
     // model is placed under the floors' control
-    private highlightedModelId: Id | null = null;
+    private prevHoveredModelId: Id | null = null;
 
     constructor(
         private plugin: GltfPlugin,
@@ -185,7 +185,7 @@ export class RealtyScene {
                 const id = ev.target.modelId;
                 if (this.isFacadeBuilding(id)) {
                     this.container.style.cursor = '';
-                    if (this.highlightedModelId !== null) {
+                    if (this.prevHoveredModelId !== null) {
                         this.toggleHighlightModel(id);
                     }
                 }
@@ -272,8 +272,8 @@ export class RealtyScene {
         if (model !== undefined && model.floors !== undefined) {
             // click to the building button
             if (ev.floorId === undefined) {
-                if (this.highlightedModelId !== null) {
-                    this.toggleHighlightModel(this.highlightedModelId);
+                if (this.prevHoveredModelId !== null) {
+                    this.toggleHighlightModel(this.prevHoveredModelId);
                 }
 
                 this.clearPoiGroups();
@@ -443,26 +443,19 @@ export class RealtyScene {
             return;
         }
 
+        let shouldUnsetFlag = false;
         model.traverse((obj) => {
             if (obj instanceof THREE.Mesh) {
-                if (obj.material instanceof THREE.MeshBasicMaterial) {
-                    const newMaterial = new THREE.MeshStandardMaterial({
-                        map: obj.material.map,
-                    });
-                    obj.material = newMaterial;
-                    obj.material.emissive = new THREE.Color('#ffffff');
-                    obj.material.emissiveIntensity = 0.25;
-                    this.highlightedModelId = modelId;
+                if (modelId === this.prevHoveredModelId) {
+                    obj.material.emissiveIntensity = 0.0;
+                    shouldUnsetFlag = true;
                 } else {
-                    const newMaterial = new THREE.MeshBasicMaterial({
-                        map: obj.material.map,
-                    });
-                    obj.material = newMaterial;
-                    this.highlightedModelId = null;
+                    obj.material.emissiveIntensity = 0.25;
                 }
             }
         });
 
+        this.prevHoveredModelId = shouldUnsetFlag ? null : modelId;
         this.map.triggerRerender();
     }
 }