1.可以用2d和3d渲染

3d

2d

  示例代码:

<!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://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="../build/ros3d.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.1.102:9091'

});

// Create the main viewer.

var viewer = new ROS3D.Viewer({

divID : 'map1',

width : 800,

height : 600,

antialias : true

});

// Setup the marker client.

var gridClient = new ROS3D.OccupancyGridClient({

ros : ros,

rootObject : viewer.scene,

topic : '/projected_map', // 修改这里

continuous: true

});

}

</script>

</head>

<body onload="init()">

<h1>Continuous Map Example</h1>

<p>

Use any method to publish continuous updates to topic /map and use this page to visualize updates. Follow these commands:

</p>

<ol>

<li><tt>roscore</tt></li>

<li><tt>(method of choice to publish to /map)</tt></li>

<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>

</ol>

<div id="map1"></div>

</body>

</html>

此代码不完整:完整的需要去robotwebtools上下载2d、3d功能包。主要提供一种思路:默认订阅map话题,如果机器人不是map话题发布地图,得加上topic参数。

实现思路:

1.启动机器人地图话题

2.启动机器人端websocket

3.在web端口修改代码、话题,实现地图实时订阅

如果需要webros技术整合支持,请加qq:2455232431

效果地址:vue3搭建web平台实时显示机器人仿真栅格图_哔哩哔哩_bilibili

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐