Add visibility control and degree markers to robotic arm mesh

app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx

@@ -266,7 +266,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
     return (
         <>
             {customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && (
-                <mesh rotation={armBot.rotation} position={armBot.position}>
+                <mesh rotation={armBot.rotation} position={armBot.position} visible={false}>
                     <Line
                         points={customCurvePoints.map((p) => [p.x, p.y, p.z] as [number, number, number])}
                         color="green"
@@ -278,6 +278,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
             <group
                 position={[armBot.position[0], armBot.position[1] + 1.5, armBot.position[2]]}
                 rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]}
+                visible={false}
             >
                 {/* Green ring */}
                 <mesh rotation={[-Math.PI / 2, 0, 0]}>
@@ -285,6 +286,42 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
                     <meshBasicMaterial color="green" side={THREE.DoubleSide} />
                 </mesh>
 
+                {/* Markers at 90°, 180°, 270°, 360° */}
+                {[90, 180, 270, 360].map((degree, index) => {
+                    const rad = ((degree) * Math.PI) / 180;
+                    const x = CIRCLE_RADIUS * Math.cos(rad);
+                    const z = CIRCLE_RADIUS * Math.sin(rad);
+                    const y = 0; // same plane as the ring (Y axis)
+
+                    return (
+                        <mesh key={index} position={[x, y, z]}>
+                            <sphereGeometry args={[0.05, 16, 16]} />
+                            <meshStandardMaterial color="red" />
+                        </mesh>
+                    );
+                })}
+
+                {[90, 180, 270, 360].map((degree, index) => {
+                    const rad = ((degree) * Math.PI) / 180;
+                    const x = CIRCLE_RADIUS * Math.cos(rad);
+                    const z = CIRCLE_RADIUS * Math.sin(rad);
+                    const y = 0.15; // lift the text slightly above the ring
+
+                    return (
+                        <Text
+                            key={`text-${index}`}
+                            position={[x, y, z]}
+                            fontSize={0.2}
+                            color="yellow"
+                            anchorX="center"
+                            anchorY="middle"
+                        >
+                            {degree}°
+                        </Text>
+                    );
+                })}
+
+
             </group>
 
         </>