ROS与javascript入门教程-ros3djs-3D可视化点云

ROS与javascript入门教程-ros3djs-可视化点云

说明：

介绍如何通过ros3djs可视化点云

github:

参考代码

步骤：

新建DepthCloud.html
代码如下：

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

<script type="text/javascript" src="../include/threejs/three.js"></script>
<script type="text/javascript" src="../include/EventEmitter2/eventemitter2.js"></script>
<script type="text/javascript" src="../include/roslibjs/roslib.js"></script>
<script type="text/javascript" src="../build/ros3d.js"></script>

<script type="text/javascript" type="text/javascript">
  /**
   * 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 : 'viewer',
      width : 800,
      height : 600,
      antialias : true
    });

    // Setup a client to listen to TFs.
    var tfClient = new ROSLIB.TFClient({
      ros : ros,
      angularThres : 0.01,
      transThres : 0.01,
      rate : 10.0,
      fixedFrame : '/camera_link'
    });

    // Setup Kinect DepthCloud stream
    depthCloud = new ROS3D.DepthCloud({
      url : 'http://'+window.location.hostname + ':9999/streams/depthcloud_encoded.webm',
      f : 525.0
    });
    depthCloud.startStream();

    // Create Kinect scene node
    var kinectNode = new ROS3D.SceneNode({
      frameID : '/camera_rgb_optical_frame',
      tfClient : tfClient,
      object : depthCloud
    });
    viewer.scene.add(kinectNode);
  }
</script>
</head>

<body onload="init()">
  <h1>Simple DepthCloud Example</h1>
  <p>Run the following commands in the terminal then go to http://localhost:9999/examples/depthcloud.html*.</p>
  <ol>
    <li><tt>roscore</tt></li>
    <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
    <li><tt>rosrun tf2_web_republisher tf2_web_republisher</tt></li>
    <li><tt>roslaunch openni_launch openni.launch depth_registration:=true</tt></li>
    <li><tt>rosrun ros_web_video ros_web_video _port:=9999 _framerate:=15 _bitrate:=250000 _profile:=best _www_file_server:=true _wwwroot:=<b>/path/to/ros3djs/</b></tt></li>
    <li><tt>rosrun depthcloud_encoder depthcloud_encoder_node _depth:=/camera/depth_registered/image_rect _rgb:=/camera/rgb/image_rect_color</tt></li>
  </ol>
  <small>*Due to a bug in the current WebGL implementations, it is not possible to serve
  this file and the video stream from a different host or port number, so we need ros_web_video
  to serve the html file as well. If you use Apache, you can set it up to proxy port 9999 to a subdirectory.</small><br/>
  <div id="viewer"></div>
</body>
</html>

代码解析：

代码段：

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

解释：
- 创建ROS3D.Viewer对象，用于放置视图内容

代码段：

var tfClient = new ROSLIB.TFClient({
  ros : ros,
  angularThres : 0.01,
  transThres : 0.01,
  rate : 10.0,
  fixedFrame : '/camera_link'
});

解释：
- 创建ROSLIB.TFClient对象，用于订阅相应TF变换
代码段：

depthCloud = new ROS3D.DepthCloud({
  url : 'http://'+window.location.hostname + ':9999/streams/depthcloud_encoded.webm',
  f : 525.0
});
depthCloud.startStream();

解释：
- 创建ROS3D.DepthCloud对象，获取点云数据
代码段：

// Create Kinect scene node
var kinectNode = new ROS3D.SceneNode({
  frameID : '/camera_rgb_optical_frame',
  tfClient : tfClient,
  object : depthCloud
});

解释：
- 创建ROS3D.SceneNode对象，增加点云都场景节点，并构建TF变换

运行：

需要rosbridge_server, tf2_web_republisher, openni_camera, ros_web_video, depth_image_proc和depthcloud_encoder包
服务器，新终端，运行

roslaunch rosbridge_server rosbridge_websocket.launch

服务器，新终端，运行

rosrun tf2_web_republisher tf2_web_republisher

服务器，新终端，运行

roslaunch openni_launch openni.launch depth_registration:=true

服务器，新终端，运行

rosrun ros_web_video ros_web_video _port:=9999 _framerate:=15 _bitrate:=250000 _profile:=best www_file_server:=true _wwwroot:=<b>/path/to/ros3djs/

服务器，新终端，运行

rosrun nodelet nodelet standalone depth_image_proc/convert_metric 
image_raw:=/camera/depth_registered/image_raw image:=/camera/depth_registered/image_float

服务器，新终端，运行

rosrun depthcloud_encoder depthcloud_encoder_node _depth:=/camera/depth_registered/image_float _rgb:=/camera/rgb/image_rect_color

浏览器运行DepthCloud.html

参考：

http://wiki.ros.org/ros3djs/Tutorials/Point%20Cloud%20Streaming%20from%20a%20Kinect

获取最新文章: 扫一扫右上角的二维码加入“创客智造”公众号