Add options for the color of highlighted models

demo/index.ts

@@ -29,6 +29,9 @@ async function start() {
                 fontSize: 14,
             },
         },
+        hoverHighlight: {
+            intencity: 0.1,
+        },
     });
 
     const defaultState = {

src/defaultOptions.ts

@@ -5,6 +5,10 @@ export const defaultOptions: Required<PluginOptions> = {
         color: '#ffffff',
         intencity: 3,
     },
+    hoverHighlight: {
+        color: '#ffffff',
+        intencity: 0.0,
+    },
     dracoScriptsUrl: 'https://unpkg.com/@2gis/mapgl-gltf@^1/dist/libs/draco/',
     modelsBaseUrl: '',
     modelsLoadStrategy: 'waitAll',

src/loader.ts

@@ -5,8 +5,9 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { degToRad } from './utils/common';
 import { concatUrl, isAbsoluteUrl } from './utils/url';
 import { mapPointFromLngLat, geoToMapDistance } from './utils/geo';
+import { defaultOptions } from './defaultOptions';
 
-import type { ModelOptions } from './types/plugin';
+import type { ModelOptions, HightlightOptions } from './types/plugin';
 
 interface LoaderOptions {
     dracoScriptsUrl: string;
@@ -16,6 +17,7 @@ interface LoaderOptions {
 export class Loader extends GLTFLoader {
     private options: LoaderOptions;
     private models = new Map<string, THREE.Object3D>();
+    private hoverParams = defaultOptions.hoverHighlight;
 
     constructor(options: LoaderOptions) {
         super();
@@ -90,7 +92,7 @@ export class Loader extends GLTFLoader {
                                 map: obj.material.map,
                             });
                             obj.material = newMaterial;
-                            obj.material.emissive = new THREE.Color('#ffffff');
+                            obj.material.emissive = new THREE.Color(this.hoverParams.color);
                             obj.material.emissiveIntensity = 0.0;
                         }
                     });
@@ -121,4 +123,8 @@ export class Loader extends GLTFLoader {
     public getModels() {
         return this.models;
     }
+
+    public setHoverParams(color: HightlightOptions) {
+        this.hoverParams = color;
+    }
 }

src/plugin.ts

@@ -70,6 +70,7 @@ export class GltfPlugin extends Evented<GltfPluginEventTable> {
             modelsBaseUrl: this.options.modelsBaseUrl,
             dracoScriptsUrl: this.options.dracoScriptsUrl,
         });
+        this.loader.setHoverParams(this.options.hoverHighlight);
         this.models = this.loader.getModels();
 
         this.poiGroups = new PoiGroups(this.map, this.options.poiConfig);

src/realtyScene.ts

@@ -19,7 +19,7 @@ export class RealtyScene {
     private activePoiGroupIds: Id[] = [];
     private container: HTMLElement;
     private buildingFacadeIds: Id[] = [];
-    // this field is needed when the hightlited
+    // this field is needed when the highlighted
     // model is placed under the floors' control
     private prevHoveredModelId: Id | null = null;
 
@@ -437,6 +437,13 @@ export class RealtyScene {
     }
 
     public toggleHighlightModel(modelId: Id) {
+        // skip toggle if user is using default emissiveIntensity
+        // that means that model won't be hovered
+        const { intencity } = this.options.hoverHighlight;
+        if (intencity === 0) {
+            return;
+        }
+
         const model = this.models.get(String(modelId));
 
         if (model === undefined) {
@@ -450,7 +457,7 @@ export class RealtyScene {
                     obj.material.emissiveIntensity = 0.0;
                     shouldUnsetFlag = true;
                 } else {
-                    obj.material.emissiveIntensity = 0.25;
+                    obj.material.emissiveIntensity = intencity;
                 }
             }
         });

src/types/plugin.ts

@@ -12,13 +12,13 @@ export type ColorRepresentation = ColorModelString | HexColorString | number;
  */
 export interface AmbientLightOptions {
     /**
-     * Numeric value of the RGB component of the color.
-     * Default is 0xffffff
+     * Color of the ambient light.
+     * @default '#ffffff'
      */
     color: ColorRepresentation;
     /**
      * Numeric value of the light's strength/intensity.
-     * Default is 1
+     * @default 3
      */
     intencity: number;
 }
@@ -60,6 +60,23 @@ export interface ControlOptions {
     position: ControlPosition;
 }
 
+/**
+ * Options for the highlight color of hovered models
+ */
+export interface HightlightOptions {
+    /**
+     * Color of the hover
+     * @default '#ffffff
+     */
+    color?: ColorRepresentation;
+    /**
+     * Intensity of the color on the hover
+     * in the range from 0 to 1
+     * @default 0.0
+     */
+    intencity: number;
+}
+
 /**
  * Options for the plugin
  */
@@ -95,11 +112,14 @@ export interface PluginOptions {
          */
         secondary?: PoiConfigGranular;
     };
-
     /**
-     * Floors control
+     * Settings for floors' control
      */
     floorsControl?: ControlOptions;
+    /**
+     * Settings of the highlighted models
+     */
+    hoverHighlight?: HightlightOptions;
 }
 
 /**