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
};