How can i visualize My Turtlebot3 Navigation in web like RVIZ using ROS3djs

PVijayaGanesh commented 3 months ago

Description

How can i visualize My Turtlebot3 Navigation in web using ROS3djs

Library Version:
ROS Version: Melodic
Platform / OS: Ubuntu18

I visualize My URDF and /scan data in the web.. when i move the robot its not reflecting in the web

Here is my code...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="https://cdn.jsdelivr.net/npm/three@0.89.0/build/three.min.js"></script>
<!-- <script src="https://static.robotwebtools.org/threejs/current/ColladaLoader.js"></script> --><!-- CDN is gone -->
<!-- <script src="https://static.robotwebtools.org/threejs/current/STLLoader.js"></script> --><!-- CDN is gone -->
<script src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4/lib/eventemitter2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script>
<script src="ros3d.js"></script>
<script src="ColladaLoader.js"></script> <!-- override the default ColladaLoader -->

<script>
  /**
   * Setup all visualization elements when the page is loaded.
   */
  function init() {
    // Connect to ROS.
    var ros = new ROSLIB.Ros({
      url : 'ws://localhost:9090'
    });

    // Create the main viewer.
    var viewer = new ROS3D.Viewer({
      divID : 'urdf',
      width : 800,
      height : 600,
      antialias : true
    });

      // Setup the marker client.
      var gridClient = new ROS3D.OccupancyGridClient({
      ros : ros,
      rootObject : viewer.scene,
      continuous: 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
    });

    // Setup the URDF client.
    var urdfClient = new ROS3D.UrdfClient({
      ros : ros,
      tfClient : tfClient,
      path : '[http://127.0.0.1:8000/'](http://127.0.0.1:8000/%27),
      rootObject : viewer.scene,
    });

   // Add a LIDAR visualization client.
   var lidarClient = new ROS3D.LaserScan({
      ros : ros,
      topic : '/scan', // Adjust this if your LIDAR publishes on a different topic
      rootObject : viewer.scene,
      tfClient : tfClient,
      material : {
        color: new THREE.Color('red'), // Set color using THREE.Color
        size: 0.1 // Set size for the points
      }
    });

    // Add an odometry visualization client.
    var odomClient = new ROS3D.Odometry({
      ros : ros,
      topic : '/odom',
      rootObject : viewer.scene,
      tfClient : tfClient,
      material : {
        color: new THREE.Color('blue'),
        size: 0.1
      }
    });

  var pathClient = new ROS3D.Path({
  ros : ros,
  topic : '/path', // Adjust topic if needed
  rootObject : viewer.scene,
  tfClient : tfClient,
  material : {
    color: new THREE.Color('green'),
    lineWidth: 2
  }
});

var poseEstimator = new ROS3D.PoseWithCovariance({
      ros: ros,
      topic: '/initialpose',
      rootObject: viewer.scene,
      tfClient: tfClient,
      color: new THREE.Color(1, 0, 0)
    });

    // Add interaction for 2D pose estimation
    var interaction = new ROS3D.InteractiveMarkerClient({
      ros: ros,
      tfClient: tfClient,
      topic: '/initialpose',
      camera: viewer.camera,
      rootObject: viewer.selectableObjects
    });
  }
</script>
</head>

<body onload="init()">
  <div id="urdf"></div>
</body>
</html>

Please help me @jtbandes @baalexander @SirVer @jakobs @mszarski

PVijayaGanesh commented 3 months ago

please close this one.. I got the solution. it was working...

MatthijsBurgh commented 3 months ago

@PVijayaGanesh please close it yourself next time

RobotWebTools / ros3djs

How can i visualize My Turtlebot3 Navigation in web like RVIZ using ROS3djs #683