Urdf loader not able to load the robot

Questions
1

Inside my 3d scene , i am trying to load a sample robot from https://github.com/gkjohnson/urdf-loaders/tree/master/urdf using urdf-loader

This is my code for 3d scene in vue.js

<template>
  <div id="ThreedCanvas"></div>
</template>
<script>
import * as Three from 'three'
import { LoadingManager } from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader.js'
import URDFLoader from 'urdf-loader'

/* import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js' */
/* eslint-disable*/
export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls: null,
      container: null,
      manager: null,
      loader: null
    }
  },
  methods: {
    init: function() {
      this.manager = new LoadingManager()
      this.loader = new URDFLoader(this.manager)
      this.container = document.getElementById('ThreedCanvas')
      this.renderer = new Three.WebGLRenderer({ antialias: true, alpha: true })

      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.container.appendChild(this.renderer.domElement)

      this.scene = new Three.Scene()
      this.camera = new Three.PerspectiveCamera(25, 1, 0.1, 100)
      // Controls setup
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)

      this.controls.enabled = true

      this.camera.position.x = 4.5
      this.camera.position.y = 4
      this.camera.position.z = 4.5

      const ambientLight = new Three.HemisphereLight(this.ambientColor, '#000')
      ambientLight.groundColor.lerp(ambientLight.color, 0.5)
      ambientLight.intensity = 0.9
      ambientLight.position.set(0, 1, 0)
      this.scene.add(ambientLight)

      // Light setup
      var self = this
      this.loader.packages = {
          packageName : './package/dir/'            // The equivalent of a (list of) ROS package(s):// directory
      };
      console.log(this.loader.packages);
      
      this.loader.loadMeshCb = (path, manager, done) => {}

      this.loader.load(
        'urdf/T12/urdf/T12.URDF', // The path to the URDF within the package OR absolute
        robot => {
          console.log(this.scene,robot)

          self.scene.add(robot)
        } // The robot is loaded!
      )
      // lights

      this.scene.add(new Three.AmbientLight(0x666666))

      // Camera setup

      const near = 10
      const far = 20
      const color = 'white'
      this.scene.fog = new Three.Fog(color, near, far)

      // World setup
      const world = new Three.Object3D()
      this.scene.add(world)

      const plane = new Three.Mesh(
        new Three.PlaneBufferGeometry(40, 40),
        new Three.ShadowMaterial({
          side: Three.DoubleSide,
          transparent: true,
          opacity: 0.2
        })
      )
      plane.rotation.x = -Math.PI / 2
      plane.position.y = -0.5
      plane.receiveShadow = true
      plane.scale.set(10, 10, 10)
      this.scene.add(plane)

      var grid = new Three.GridHelper(100, 100, 0x000000, 0x000000)
      grid.material.opacity = 0.2
      grid.material.transparent = true
      this.scene.add(grid)

      var grid1 = new Three.GridHelper(4, 40, 0x000000, 0x000000)
      grid1.material.opacity = 0.1
      grid1.material.transparent = true
      this.scene.add(grid1)

      const grid2 = new Three.GridHelper(4, 400, 0x000000, 0x000000)
      grid2.material.opacity = 0.05
      grid2.material.transparent = true
      this.scene.add(grid2)
      // TODOCLG
      // console.log(grid2)

    },
    animate: function() {
      requestAnimationFrame(this.animate)
      this.mesh.rotation.x += 0.01
      this.mesh.rotation.y += 0.02
      this.renderer.render(this.scene, this.camera)
      this.controls.update()
    }
  },
  mounted() {
    this.init()
    this.animate()
  }
}
</script>
<style lang="scss" scoped>
#ThreedCanvas {
  z-index: 0;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}
</style>

when i print scene and robot i get the proper output for both , but not able to load the robot inside scene.

Can anyone tell me what could be the reason , i loaded point cloud using pcldloader, normal geometries it worked but not with the urdf loader.

// is this the reason its not working ... i have my urdf file inside public folder. please help.
this.loader.packages = {
          packageName : './package/dir/'            // The equivalent of a (list of) ROS package(s):// directory
      };
2

The documentation specifies that this is an optional loader callback in order to specify custom geometry loaders. If you would like to load a custom geometry loader you must pass the object into the done function. I suggest you remove this function until you need it.

I see that the example snippet in the docs can be misleading so I’ll go ahead and update it!