feat: add metallic material rendering to URDF robot

src/components/robot/robotRenderer.tsx

@@ -69,7 +69,24 @@ 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);
@@ -109,12 +126,16 @@ const RobotRenderer: React.FC = () => {
       animate();
     });
 
-    const light = new THREE.AmbientLight(0x404040);
-    scene.add(light);
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+    scene.add(ambientLight);
+
+    const mainLight = new THREE.DirectionalLight(0xffffff, 2.0);
+    mainLight.position.set(5, 5, 5);
+    scene.add(mainLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-    directionalLight.position.set(1, 1, 1).normalize();
-    scene.add(directionalLight);
+    const fillLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    fillLight.position.set(-5, 2, -5);
+    scene.add(fillLight);
 
     camera.position.z = 5;