Three.js加载各种urdf文件

前段时间公司需要做一个机械指令质检的功能，需要看到机械臂命令的运动轨迹，简单记录一下。
首先下载three.js
``
加载urdf文件需要下载一个urdf-loader包
npm i urdf-loader
然后导入
import URDFLoader from 'urdf-loader';

比如放在app.vue里

  LoadingManager,
  MathUtils,
} from 'three';
  import { ref, onMounted } from 'vue';
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import URDFLoader from 'urdf-loader';
  import Papa from 'papaparse';

urdf模型的放置路径是在public文件夹底下的

      function initRobot() {
       const manager = new LoadingManager();
       const loader = new URDFLoader(manager);
       loader.load('/simpleModel/urdf/simple.urdf', result => {
         robot = result;
         robot.position.set(0, 0, 0);
         // 自动居中：计算包围盒中心并整体平移
         const box = new THREE.Box3().setFromObject(robot);
         const center = new THREE.Vector3();
         box.getCenter(center);
         robot.position.sub(center);
         // 再设置旋转和缩放
         robot.rotation.x = -Math.PI / 2;
         robot.rotation.z = -Math.PI;
         robot.position.set(0, 0, 0);
         robot.scale.set(0.5, 0.5, 0.5);
         scene.add(robot);
         // 更有金属感的材质
         const white = new THREE.MeshPhysicalMaterial({
           color: 0xffffff,
           metalness: 0.7,
           roughness: 0.15,
           clearcoat: 0.5,
           clearcoatRoughness: 0.1
         });
         const black = new THREE.MeshPhysicalMaterial({
           color: 0x222222,
           metalness: 0.8,
           roughness: 0.18,
           clearcoat: 0.6,
           clearcoatRoughness: 0.15
         });
         const silver = new THREE.MeshPhysicalMaterial({
           color: 0xc0c0c0,
           metalness: 1.0,
           roughness: 0.08,
           reflectivity: 0.7,
           clearcoat: 0.8,
           clearcoatRoughness: 0.08
         });
         robot.traverse((child) => {
           if (child.isMesh) {
             let parentJointName = child.parent && child.parent.name ? child.parent.name.toLowerCase() : '';
             let meshName = child.name ? child.name.toLowerCase() : '';
             let targetMaterial = null;
             if (
               meshName === 'base_link' ||
               meshName === 'c1' || meshName === 'c2' || meshName === 'c3' || meshName === 'c4' ||
               parentJointName.startsWith('wheel')
             ) {
               targetMaterial = white;
             } else if (
               meshName.startsWith('l') ||
               parentJointName.startsWith('leftarm')
             ) {
               targetMaterial = black;
             } else if (
               meshName.startsWith('r') ||
               parentJointName.startsWith('rightarm')
             ) {
               targetMaterial = black;
             } else if (
               meshName.startsWith('leg-') ||
               parentJointName.startsWith('legwaist')
             ) {
               targetMaterial = silver;
             }
             if (targetMaterial) {
               if (Array.isArray(child.material)) {
                 for (let i = 0; i < child.material.length; i++) {
                   child.material[i] = targetMaterial;
                 }
               } else {
                 child.material = targetMaterial;
               }
               child.material.needsUpdate = true;
             }
           }
         });
       });
     }