i tried to display URDF with java script like that enter image description here
according to that tutorial link http://wiki.ros.org/ros3djs/Tutorials/VisualizingAURDF and this is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../public/js/three.js"></script>
<script src="../public/js/ColladaLoader.js"></script>
<script src="../public/js/ColladaLoader2.js"></script>
<script src="../public/js/STLLoader.js"></script>
<script src="../public/js/eventemitter2.min.js"></script>
<script src="../public/js/roslib.min.js"></script>
<script src="../public/js/ros3d.min.js"></script>
<script>
/**
* Setup all visualization elements when the page is loaded.
*/
function init() {
// Connect to ROS.
var ros = new ROSLIB.Ros({
url: 'ws://192.168.0.104:9090'
});
// Create the main viewer.
var viewer = new ROS3D.Viewer({
divID: 'urdf',
width: 800,
height: 600,
antialias: true
});
// Add a grid.
viewer.addObject(new ROS3D.Grid());
// Setup a client to listen to TFs.
var tfClient = new ROSLIB.TFClient({
ros: ros,
angularThres: 0.01,
transThres: 0.01,
rate: 10.0
})
// viewer.add(tfClient);
console.log('this is tfclient' + tfClient);
// Setup the URDF client.
var urdfClient = new ROS3D.UrdfClient({
ros: ros,
tfClient: tfClient,
// path : 'http://resources.robotwebtools.org/',
rootObject: viewer.scene,
loader : ROS3D.COLLADA_LOADER_2
});
console.log('this is urdf' + urdfClient);
}
</script>
</head>
<body onload="init()">
<h1>Simple URDF Example</h1>
<div id="urdf"></div>
</body>
</html>but the grid is displayed without the 3d model of the robot .. what should i do this is the result of running the code enter image description here
