feat: add metallic material rendering to URDF robot

- Added updateMaterials function to set metallic properties
- Enhanced lighting setup for better metallic visualization
- Preserved original colors while adding metallic effect
- Set metalness to 0.4 and roughness to 0.5

Co-Authored-By: Benjamin Bolte <[email protected]>

src/components/robot/robotRenderer.tsx

@@ -71,9 +71,25 @@ const RobotRenderer: React.FC = () => {
 
     const loader = new URDFLoader();
     loader.load(URDF_URL, (robot: THREE.Object3D) => {
+      const updateMaterials = () => {
+        robot.traverse((child) => {
+          if (child instanceof THREE.Mesh) {
+            const originalColor =
+              child.material instanceof THREE.Material
+                ? (child.material as THREE.MeshPhysicalMaterial).color
+                : new THREE.Color(0x808080);
+            child.material = new THREE.MeshPhysicalMaterial({
+              metalness: 0.4,
+              roughness: 0.5,
+              color: originalColor,
+            });
+          }
+        });
+      };
+
       scene.add(robot);
+      updateMaterials();
 
-      // Correcting for the robot initial size and position.
       robot.rotateY(Math.PI / 2);
       robot.translateY(TRANSLATE_Y);
       robot.scale.set(SCALE, SCALE, SCALE);
@@ -91,7 +107,6 @@ const RobotRenderer: React.FC = () => {
         requestAnimationFrame(animate);
         controls.update();
 
-        // Update joint positions with a sinusoidal pattern
         const time = (Date.now() - startTime) / 1000;
         robot.traverse((child) => {
           const joint = child as URDFJoint;