fix(materials): Fix setColor and setOpacity

packages/fragments/src/FragmentsModels/src/model/material-manager.ts

@@ -199,23 +199,13 @@ export class MaterialManager {
     if (!localMap.has(highlightIndex)) {
       const originalDefinition = materialDefinitions[index];
       const newDefinition = materialDefinitions[highlightIndex];
-      const { preserveOriginalMaterial, ...highlightDefinition } = newDefinition;
+      const { preserveOriginalMaterial, _explicitProps, ...highlightDefinition } = newDefinition;
       const combinedDefinition: MaterialDefinition = { ...originalDefinition };
       if (preserveOriginalMaterial) {
-        if (highlightDefinition.color !== undefined) {
-          combinedDefinition.color = highlightDefinition.color;
-        }
-        if (highlightDefinition.opacity !== undefined) {
-          combinedDefinition.opacity = highlightDefinition.opacity;
-        }
-        if (highlightDefinition.transparent !== undefined) {
-          combinedDefinition.transparent = highlightDefinition.transparent;
-        }
-        if (highlightDefinition.renderedFaces !== undefined) {
-          combinedDefinition.renderedFaces = highlightDefinition.renderedFaces;
-        }
-        if (highlightDefinition.depthTest !== undefined) {
-          combinedDefinition.depthTest = highlightDefinition.depthTest;
+        for (const prop of _explicitProps ?? []) {
+          if ((highlightDefinition as any)[prop] !== undefined) {
+            (combinedDefinition as any)[prop] = (highlightDefinition as any)[prop];
+          }
         }
       } else {
         Object.assign(combinedDefinition, highlightDefinition);

packages/fragments/src/FragmentsModels/src/model/model-types.ts

@@ -132,6 +132,13 @@ export type MaterialDefinition = {
 
   /** The local ID of the material */
   localId?: number;
+
+  /**
+   * Internal array tracking which properties were explicitly set by the caller.
+   * Used with preserveOriginalMaterial to avoid overwriting original material 
+   * properties with default values during serialization.
+   */
+  _explicitProps?: string[];
 };
 export interface MaterialData {
   data: MaterialDefinition;

packages/fragments/src/FragmentsModels/src/virtual-model/virtual-helpers/highlight-helper.ts

@@ -1,3 +1,4 @@
+import * as THREE from "three";
 import { MaterialDefinition } from "../../model/model-types";
 import { VirtualFragmentsModel } from "../virtual-fragments-model";
 
@@ -103,9 +104,19 @@ export class HighlightHelper {
     items: number[],
     color: MaterialDefinition["color"],
   ) {
+    let normalizedColor = color;
+    if (color && !color.isColor && typeof color.r === "number") {
+      normalizedColor = new THREE.Color().setRGB(
+        color.r,
+        color.g,
+        color.b,
+        THREE.SRGBColorSpace
+      );
+    }
     const material = {
-      color,
+      color: normalizedColor,
       preserveOriginalMaterial: true,
+      _explicitProps: ['color'],
     } as MaterialDefinition;
     this.highlight(model, items, material);
   }
@@ -126,6 +137,7 @@ export class HighlightHelper {
       opacity,
       transparent: opacity < 1,
       preserveOriginalMaterial: true,
+      _explicitProps: ['opacity', 'transparent'],
     } as MaterialDefinition;
     this.highlight(model, items, material);
   }
@@ -169,9 +181,24 @@ export class HighlightHelper {
   ) {
     const pastHigh = model.materials.fetch(past);
     const newHigh = { ...highlightMaterial } as MaterialDefinition;
-    for (const prop of this._highlightProps) {
-      this.setHighlightProperty(newHigh, pastHigh, prop as any);
+
+    const pastExplicit: string[] = (pastHigh as any)._explicitProps || [];
+    const newExplicit: string[] = (highlightMaterial as any)._explicitProps || [];
+
+    if (pastExplicit.length > 0 || newExplicit.length > 0) {
+      for (const prop of pastExplicit) {
+        const key = prop as keyof MaterialDefinition;
+        if (!newExplicit.includes(prop) && pastHigh[key] !== undefined) {
+          (newHigh as any)[prop] = pastHigh[key];
+        }
+      }
+      (newHigh as any)._explicitProps = [...new Set([...pastExplicit, ...newExplicit])];
+    } else {
+      for (const prop of this._highlightProps) {
+        this.setHighlightProperty(newHigh, pastHigh, prop as keyof MaterialDefinition);
+      }
     }
+
     return newHigh;
   }