diff --git a/src/components/three/ModelViewer.tsx b/src/components/three/ModelViewer.tsx index 4e98c9d..4f0657e 100644 --- a/src/components/three/ModelViewer.tsx +++ b/src/components/three/ModelViewer.tsx @@ -773,28 +773,26 @@ function VisibilityApplier() { const selected = selectedElementKeys.has(key); el.traverse((m) => { if (!(m instanceof THREE.Mesh)) return; - const mats = Array.isArray(m.material) ? m.material : [m.material]; - mats.forEach((mat) => { - if (!(mat instanceof THREE.MeshStandardMaterial)) return; - if (selected) { - if (m.userData.__origColor === undefined) { - m.userData.__origColor = mat.color.getHex(); - m.userData.__origEmissive = mat.emissive.getHex(); - m.userData.__origEmissiveIntensity = mat.emissiveIntensity; + if (selected) { + if (!m.userData.__origMaterial) { + m.userData.__origMaterial = m.material; + const src = Array.isArray(m.material) ? m.material[0] : m.material; + const cloned = (src as THREE.Material).clone() as THREE.MeshStandardMaterial; + if (cloned instanceof THREE.MeshStandardMaterial) { + cloned.color.set('#f59e0b'); + cloned.emissive.set('#f59e0b'); + cloned.emissiveIntensity = 0.8; + cloned.needsUpdate = true; } - mat.color.set('#f59e0b'); - mat.emissive.set('#f59e0b'); - mat.emissiveIntensity = 1.0; - } else if (m.userData.__origColor !== undefined) { - mat.color.setHex(m.userData.__origColor as number); - mat.emissive.setHex(m.userData.__origEmissive as number); - mat.emissiveIntensity = (m.userData.__origEmissiveIntensity as number) ?? 0; - delete m.userData.__origColor; - delete m.userData.__origEmissive; - delete m.userData.__origEmissiveIntensity; + m.material = cloned; } - mat.needsUpdate = true; - }); + } else if (m.userData.__origMaterial) { + // Dispose the cloned highlight material + const cur = Array.isArray(m.material) ? m.material[0] : m.material; + (cur as THREE.Material)?.dispose?.(); + m.material = m.userData.__origMaterial as THREE.Material; + delete m.userData.__origMaterial; + } }); }); });