From b302b91de9423e15c52805a48fc7ad83bcd36677 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 14 May 2026 16:45:24 +0000
Subject: [PATCH] Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
---
 src/pages/XRSession.tsx | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/pages/XRSession.tsx b/src/pages/XRSession.tsx
index 9c33a90..3ffb5f8 100644
--- a/src/pages/XRSession.tsx
+++ b/src/pages/XRSession.tsx
@@ -32,10 +32,11 @@ const store = createXRStore({
 });
 
 // ─── XRModel ───────────────────────────────────────────
-function XRModel({ url }: { url: string }) {
-  const { scene } = useGLTF(url);
+function XRModel({ sceneModel }: { sceneModel: import('@/stores/useModelStore').SceneModel }) {
+  const { scene: rawScene } = useGLTF(sceneModel.url);
+  const scene = useMemo(() => rawScene.clone(true), [rawScene]);
   const ref = useRef<THREE.Group>(null);
-  const fineTuning = useModelStore((s) => s.fineTuning);
+  const fineTuning = sceneModel.fineTuning;
   const opacity = useModelStore((s) => s.opacity);
   const renderMode = useModelStore((s) => s.renderMode);
   const wireframeColor = useModelStore((s) => s.wireframeColor);
@@ -64,7 +65,6 @@ function XRModel({ url }: { url: string }) {
           child.material = child.material.clone();
         }
 
-        // Clean up previous edge lines
         const toRemove: THREE.Object3D[] = [];
         child.children.forEach(c => {
           if (c.userData.__edgeLine) toRemove.push(c);
@@ -95,7 +95,7 @@ function XRModel({ url }: { url: string }) {
               } else if (allApproved) {
                 mat.color.setHSL(0.38, 0.7, 0.45);
               } else {
-                mat.color.set(0x8899aa);
+                mat.color.set(sceneModel.color);
               }
             }
             mat.needsUpdate = true;
@@ -111,7 +111,7 @@ function XRModel({ url }: { url: string }) {
         }
       }
     });
-  }, [scene, opacity, renderMode, checklist, wireframeColor, wireframeThickness, edgeThresholdAngle]);
+  }, [scene, opacity, renderMode, checklist, wireframeColor, wireframeThickness, edgeThresholdAngle, sceneModel.color]);
 
   const rotXRad = (fineTuning.rotX * Math.PI) / 180;
   const rotYRad = (fineTuning.rotY * Math.PI) / 180;
@@ -120,6 +120,8 @@ function XRModel({ url }: { url: string }) {
   const scaleRatio = useModelStore((st) => st.scaleRatio);
   const renderFactor = scaleRatio?.factor ?? 1;
 
+  if (!sceneModel.visible) return null;
+
   return (
     <group scale={[renderFactor, renderFactor, renderFactor]}>
       <group
@@ -138,6 +140,28 @@ function XRModel({ url }: { url: string }) {
   );
 }
 
+/** Renders all NON-active models as static background (placement + grab apply only to active). */
+function XRBackgroundModels() {
+  const models = useModelStore((s) => s.models);
+  const activeId = useModelStore((s) => s.activeModelId);
+  return (
+    <>
+      {models.filter(m => m.id !== activeId).map((m) => (
+        <XRModel key={m.id} sceneModel={m} />
+      ))}
+    </>
+  );
+}
+
+/** Renders the currently-active model (the one wrapped by grab/placement). */
+function XRActiveModel() {
+  const models = useModelStore((s) => s.models);
+  const activeId = useModelStore((s) => s.activeModelId);
+  const active = models.find(m => m.id === activeId);
+  if (!active) return null;
+  return <XRModel sceneModel={active} />;
+}
+
 // ─── ControllerFineTuning ──────────────────────────────
 // Joystick for slow numeric adjustments. Disabled while any grip is held
 // (grab takes priority). Trigger pressure modulates speed: light = fine,