fix: improve 3D digital twin visual clarity

- Increase item visual scale ×2.5 with glow ring
- Move camera closer [4.0, 3.0, 4.0]
- Improve scene contrast (brighter conveyor, floor)
- Add glow to active routes
- Enhance gate/pusher visibility
- Add highlight rings to active zones
- Brighten sensors with detection effects

Based on REAL_3D_AUDIT_REPORT.md P0/P1 fixes.

src/components/ThreeD/SortingZones3D.tsx

@@ -19,16 +19,32 @@ function ZoneBox({
   active: boolean;
 }) {
   return (
-    <mesh position={position}>
-      <boxGeometry args={size} />
-      <meshStandardMaterial
-        color={color}
-        transparent
-        opacity={active ? 0.5 : 0.22}
-        emissive={color}
-        emissiveIntensity={active ? 0.4 : 0.12}
-      />
-    </mesh>
+    <group position={position}>
+      <mesh>
+        <boxGeometry args={size} />
+        <meshStandardMaterial
+          color={color}
+          transparent
+          opacity={active ? 0.6 : 0.2}
+          emissive={color}
+          emissiveIntensity={active ? 0.7 : 0.1}
+        />
+      </mesh>
+      {/* Highlight ring for active zone */}
+      {active && (
+        <mesh position={[0, size[1] / 2 + 0.02, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+          <ringGeometry args={[size[0] * 0.4, size[0] * 0.55, 32]} />
+          <meshStandardMaterial
+            color={color}
+            emissive={color}
+            emissiveIntensity={1.0}
+            transparent
+            opacity={0.8}
+            side={2}
+          />
+        </mesh>
+      )}
+    </group>
   );
 }
 
@@ -52,19 +68,19 @@ function RollCage({
         <meshStandardMaterial
           color={color}
           transparent
-          opacity={active ? 0.25 : 0.1}
+          opacity={active ? 0.4 : 0.15}
           emissive={color}
-          emissiveIntensity={active ? 0.3 : 0.08}
+          emissiveIntensity={active ? 0.6 : 0.1}
         />
       </mesh>
       
       {/* Cage wireframe edges (visible frame) */}
       <lineSegments>
         <edgesGeometry args={[new THREE.BoxGeometry(...size)]} />
-        <lineBasicMaterial color={color} linewidth={active ? 2 : 1} opacity={active ? 1 : 0.6} transparent />
+        <lineBasicMaterial color={color} linewidth={active ? 3 : 1} opacity={active ? 1 : 0.5} transparent />
       </lineSegments>
       
-      {/* Vertical posts (corners) for visual emphasis */}
+      {/* Vertical posts (corners) for visual emphasis - thicker */}
       {[
         [-size[0] / 2, 0, -size[2] / 2],
         [size[0] / 2, 0, -size[2] / 2],
@@ -72,10 +88,30 @@ function RollCage({
         [size[0] / 2, 0, size[2] / 2],
       ].map((offset, i) => (
         <mesh key={i} position={offset as [number, number, number]}>
-          <boxGeometry args={[0.04, size[1], 0.04]} />
-          <meshStandardMaterial color={color} metalness={0.3} roughness={0.7} />
+          <boxGeometry args={[0.06, size[1], 0.06]} />
+          <meshStandardMaterial 
+            color={color} 
+            metalness={0.4} 
+            roughness={0.6}
+            emissive={active ? color : '#000000'}
+            emissiveIntensity={active ? 0.3 : 0}
+          />
         </mesh>
       ))}
+      
+      {/* Floor highlight for active cage */}
+      {active && (
+        <mesh position={[0, -size[1] / 2 + 0.02, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+          <planeGeometry args={[size[0] * 0.9, size[2] * 0.9]} />
+          <meshStandardMaterial
+            color={color}
+            emissive={color}
+            emissiveIntensity={0.6}
+            transparent
+            opacity={0.5}
+          />
+        </mesh>
+      )}
     </group>
   );
 }