refactor: Clean up console logs and adjust MaterialSpawner properties

app/src/modules/scene/controls/undoRedoControls/undoRedo3D/undoRedo3DControls.tsx

@@ -20,7 +20,7 @@ function UndoRedo3DControls() {
     const { selectedVersion } = selectedVersionStore();
 
     useEffect(() => {
-        console.log(undoStack, redoStack);
+        // console.log(undoStack, redoStack);
     }, [undoStack, redoStack]);
 
     useEffect(() => {

app/src/modules/scene/physics/colliders/colliderInstance/colliderInstance.tsx

@@ -6,9 +6,7 @@ import * as THREE from 'three';
 import { useSceneContext } from '../../../sceneContext';
 import { ColliderArrow } from './colliderArrow';
 
-function ColliderInstance({ collider }: {
+function ColliderInstance({ collider }: { collider: Collider }) {
-    collider: Collider
-}) {
     const { camera, gl, pointer, controls } = useThree();
     const { colliderStore } = useSceneContext();
     const { colliders, selectedCollider, setSelectedCollider, updateCollider, getArrowByArrowId } = colliderStore();
@@ -18,19 +16,7 @@ function ColliderInstance({ collider }: {
     const ref = useRef<RapierRigidBody>(null);
     const [objectsOnCollider, setObjectsOnCollider] = useState<Set<RapierRigidBody>>(new Set());
     const isSelected = selectedCollider?.id === collider.id;
-
+    const objectCounterRef = useRef(0);
-    const getColorByType = (type: string) => {
-        switch (type) {
-            case 'Material 1':
-                return new THREE.Color('blue');
-            case 'Material 2':
-                return new THREE.Color('purple');
-            case 'Material 3':
-                return new THREE.Color('yellow');
-            default:
-                return new THREE.Color('white');
-        }
-    };
 
     const handlePointerDown = (id: string) => {
         if (controls) {
@@ -66,21 +52,11 @@ function ColliderInstance({ collider }: {
             return;
         };
 
-        const screenTarget = new THREE.Vector3(
+        const screenTarget = new THREE.Vector3(pointer.x + dragOffset.current.x, 0, pointer.y + dragOffset.current.z);
-            pointer.x + dragOffset.current.x,
-            0,
-            pointer.y + dragOffset.current.z
-        );
-
         const worldTarget = new THREE.Vector3(screenTarget.x, screenTarget.z, 0.5).unproject(camera);
-
         const dir = worldTarget.clone().sub(camera.position).normalize();
         const finalPos = camera.position.clone().add(dir.multiplyScalar(initialDepth.current));
-
+        ref.current.setTranslation({ x: finalPos.x, y: finalPos.y, z: finalPos.z }, true);
-        ref.current.setTranslation(
-            { x: finalPos.x, y: finalPos.y, z: finalPos.z },
-            true
-        );
     }
 
     const handlePointerUp = () => {
@@ -90,19 +66,16 @@ function ColliderInstance({ collider }: {
         if (!draggedId) return;
 
         if (ref.current) {
-            // restore physics
             ref.current.setGravityScale(1, true);
             ref.current.setLinearDamping(0.5);
             ref.current.setAngularDamping(0.5);
 
-            // get final transform
             const pos = ref.current.translation();
             const rot = ref.current.rotation();
 
-            // update Zustand store
             updateCollider(draggedId, {
                 position: [pos.x, pos.y, pos.z],
-                rotation: [rot.x, rot.y, rot.z], // quaternion
+                rotation: [rot.x, rot.y, rot.z],
             });
         }
 
@@ -128,6 +101,10 @@ function ColliderInstance({ collider }: {
                 newSet.add(body);
                 return newSet;
             });
+
+            if (collider.colliderCondition.conditionType === "count") {
+                objectCounterRef.current += 1;
+            }
         }
     };
 
@@ -145,36 +122,39 @@ function ColliderInstance({ collider }: {
     useFrame(() => {
         objectsOnCollider.forEach(rigidBody => {
             if (!rigidBody) return;
-            // if (collider.colliderCondition.conditionType === 'material') {
-            //     if (collider.colliderCondition.materialType === (rigidBody as any).userData.materialType) {
-            //         console.log('(rigidBody as any).userData.materialType: ', (rigidBody as any).userData.materialType);
-            //         collider.colliderCondition.arrowsOrder.forEach((arrowId) => {
-            //             console.log('arrow: ', arrowId);
-            //             let arrowDetails = getArrowByArrowId(arrowId);
-            //             if (arrowDetails?.position) {
-            //                 const arrowPos = new THREE.Vector3(...arrowDetails?.position); // arrow position
-            //                 const colliderPos = new THREE.Vector3(...(selectedCollider?.position || [0, 0, 0])); // collider position
-            //                 const direction = new THREE.Vector3();
-            //                 direction.subVectors(arrowPos, colliderPos).normalize();
-            //                 console.log('Direction vector:', direction);
-            //                 rigidBody.setLinvel({ x: direction.x, y: direction.y, z: direction.z }, true);
-            //             }
 
-            //             // rigidBody.setAngvel({ x: 0, y: 0, z: 0 }, true);
+            if (collider.colliderCondition.conditionType === "material") {
-
+                const bodyMaterial = (rigidBody as any).userData.materialType;
-
+                if (!bodyMaterial) return;
-            //             // Direction vector from collider to arrow
+                let matchedCondition = collider.colliderCondition.arrowCondition?.find((material) => material.materialType === bodyMaterial);
-
+                if (!matchedCondition) {
-
+                    matchedCondition = collider.colliderCondition.arrowCondition?.find((material) => material.materialType === "Any");
-            //         });
+                }
-
+                if (matchedCondition) {
-            //     } else {
+                    let arrowDetails = getArrowByArrowId(matchedCondition.arrowId);
-
+                    if (arrowDetails?.position && ref.current) {
-
+                        const arrowPos = new THREE.Vector3(...arrowDetails.position);
-            //     }
+                        const colliderPos = new THREE.Vector3(...(collider.position || [0, 0, 0]));
-            // } else if (collider.colliderCondition.conditionType === 'count') {
+                        const direction = new THREE.Vector3();
-
+                        direction.subVectors(arrowPos, colliderPos).normalize();
-            // }
+                        rigidBody.setLinvel({ x: direction.x, y: direction.y, z: direction.z }, true);
+                    }
+                }
+            } else if (collider.colliderCondition.conditionType === "count") {
+                let { count, arrowsOrder } = collider.colliderCondition;
+                if (!arrowsOrder || arrowsOrder.length === 0) return;
+                const totalProcessed = objectCounterRef.current;
+                const arrowIndex = Math.floor(totalProcessed / count) % arrowsOrder.length;
+                const arrowId = arrowsOrder[arrowIndex];
+                const arrowDetails = getArrowByArrowId(arrowId);
+                if (arrowDetails?.position && ref.current) {
+                    const arrowPos = new THREE.Vector3(...arrowDetails.position);
+                    const colliderPos = new THREE.Vector3(...(collider.position || [0, 0, 0]));
+                    const direction = new THREE.Vector3();
+                    direction.subVectors(arrowPos, colliderPos).normalize();
+                    rigidBody.setLinvel({ x: direction.x, y: direction.y, z: direction.z }, true);
+                }
+            }
         });
     });
 

app/src/modules/scene/physics/conveyor/types/ySplitConveyorCollider.tsx

@@ -253,7 +253,7 @@ function YSplitConveyorCollider({
                 >
                     <mesh geometry={geometry}>
                         <meshStandardMaterial
-                            // visible={false}
+                            visible={false}
                             color={forward ? "#64b5f6" : "#f48fb1"} // More subtle colors
                             side={THREE.DoubleSide}
                             transparent
@@ -277,6 +277,7 @@ function YSplitConveyorCollider({
                 <group>
                     {geometries.map((geometry, index) => (
                         <mesh
+                            //   visible={false}
                             key={`highlight-${index}`}
                             geometry={geometry}
                             position={[0, 0.002, 0]}

app/src/modules/scene/physics/materialSpawner.tsx

@@ -21,7 +21,7 @@ function MaterialSpawner({ position: initialPos, spawnInterval, spawnCount }: Ma
         ref: React.RefObject<RapierRigidBody>;
         materialType: string;
     }[]>([]);
-    const [spawningPaused, setSpawningPaused] = useState(false);
+    const [spawningPaused, setSpawningPaused] = useState(true);
     const spawnedCount = useRef(0);
     const { gl, camera, pointer, controls } = useThree();
     const [draggedId, setDraggedId] = useState<string | null>(null);

app/src/modules/scene/physics/physicsSimulator.tsx

@@ -8,9 +8,9 @@ function PhysicsSimulator() {
         <>
 
             <MaterialSpawner
-                position={[7.1, 2, 12.6]}
+                position={[7.3, 2, 12.6]}
                 spawnInterval={1000}
-                spawnCount={10}
+                spawnCount={50}
             />
             {/* <MaterialSpawner
                 position={[3.8, 3, 3]}