190 lines
5.3 KiB
HTML
190 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script type="text/javascript" src="../roslib.min.js"></script>
|
|
<script src="../js/three.js"></script>
|
|
<script src="../js/three.js-dev/examples/js/controls/OrbitControls.js"></script>
|
|
<script src="../js/three.js-dev/examples/js/libs/stats.min.js"></script>
|
|
<script src="../js/three.js-dev/examples/js/libs/dat.gui.min.js"></script>
|
|
<script src="../eventemitter2.min.js"></script>
|
|
<script src="../ros3djs/ros3d.js"></script>
|
|
|
|
<script>
|
|
/**
|
|
* Setup all visualization elements when the page is loaded.
|
|
*/
|
|
//https://blog.csdn.net/qq_15204179/article/details/130833510
|
|
function init() {
|
|
// Connect to ROS.
|
|
var ros = new ROSLIB.Ros({
|
|
url : 'ws://localhost:9190'
|
|
});
|
|
|
|
// Create the main viewer.
|
|
var viewer = new ROS3D.Viewer({
|
|
divID : 'map',
|
|
width : 1200,
|
|
height : 400,
|
|
background: '#000000',//'#6a6a6a',//'#444444',
|
|
antialias : false//true
|
|
});
|
|
|
|
// Setup the marker client.
|
|
var gridClient = new ROS3D.OccupancyGridClient({
|
|
ros : ros,
|
|
rootObject : viewer.scene,
|
|
color : {r:200,g:200,b:200},//0xcccccc
|
|
//continuous:true
|
|
});
|
|
|
|
// Setup a client to listen to TFs.
|
|
|
|
|
|
var tfClient = new ROSLIB.TFClient({
|
|
ros : ros,
|
|
angularThres : 0.001,
|
|
transThres : 0.001,
|
|
rate : 10.0,
|
|
fixedFrame : '/map'
|
|
});
|
|
|
|
/*
|
|
var tfClient = new ROSLIB.TFClient({
|
|
ros : ros,
|
|
angularThres : 0.01,
|
|
transThres : 0.01,
|
|
rate : 10.0,
|
|
fixedFrame : '/scanner'
|
|
});
|
|
|
|
*/
|
|
|
|
// var cloudClient = new ROS3D.PointCloud2({
|
|
// ros: ros,
|
|
// tfClient: tfClient,
|
|
// rootObject: viewer.scene,
|
|
// topic: '/scan_matched_points2',
|
|
// max_pts: "10000000",
|
|
// material: { size: 1.0, color: 0x0000ff }
|
|
// });
|
|
|
|
var scanclient = new ROS3D.LaserScan({
|
|
ros: ros,
|
|
topic: '/scan',
|
|
tfClient: tfClient,
|
|
rootObject: viewer.scene,
|
|
material: { size: 0.5, color: 0xff0000 }
|
|
});
|
|
|
|
//https://answers.ros.org/question/358085/how-to-use-markerarrayclient-in-ros3djs/
|
|
var markerArrayClient = new ROS3D.MarkerArrayClient({
|
|
ros: ros,
|
|
rootObject: viewer.scene,
|
|
tfClient: tfClient,
|
|
topic: '/trajectory_node_list'
|
|
});
|
|
|
|
|
|
|
|
var markerArrayClient2 = new ROS3D.MarkerArrayClient({
|
|
ros: ros,
|
|
rootObject: viewer.scene,
|
|
tfClient: tfClient,
|
|
topic: "/constraint_list"
|
|
});
|
|
|
|
var v1 = new ROSLIB.Vector3({
|
|
x : 0,
|
|
y : 0,
|
|
z : 30
|
|
});
|
|
|
|
var q1 = new ROSLIB.Quaternion({
|
|
x : 0.1,
|
|
y : 0.2,
|
|
z : 0.3,
|
|
w : 0.4
|
|
});
|
|
|
|
var p = new ROSLIB.Pose({
|
|
position: v1,
|
|
orientation:q1
|
|
});
|
|
|
|
//console.log("Hello world");
|
|
|
|
viewer.camera.position.set(0, 0, 60);
|
|
viewer.cameraControls.autoRotate=false;
|
|
viewer.cameraControls.rotateRight(Math.PI/2);
|
|
viewer.camera.lookAt(new THREE.Vector3(0, 0, 0));
|
|
|
|
viewer.camera.updateMatrixWorld();
|
|
|
|
//viewer.camera.position.set(v1);
|
|
//viewer.camera.position.set(0, 0,100);
|
|
//viewer.cameraControls.autoRotate=false;
|
|
//viewer.camera.quaternion.w=0.707;
|
|
//viewer.camera.quaternion.x=0;
|
|
//viewer.camera.quaternion.y=0;
|
|
//viewer.camera.quaternion.z=0.707;
|
|
//viewer.camera.lookAt(new THREE.Vector3(0, 0, 0));
|
|
|
|
//console.log(viewer.camera);
|
|
//viewer.camera.updateMatrixWorld();
|
|
/*
|
|
var cloudClient = new ROS3D.PointCloud2({
|
|
ros: ros,
|
|
tfClient: tfClient,
|
|
rootObject: viewer.scene,
|
|
topic: '/scan_matched_points2',
|
|
material: { size: 1, color: 0x0000ff }
|
|
});
|
|
*/
|
|
|
|
//var basePose = new ROSLIB.Pose(message.base_pose);
|
|
//console.log("basePose:"+basePose.position.x+" "+ basePose.position.y);
|
|
//this.viewer.camera.position.set(basePose.position.x, basePose.position.y, 6);
|
|
//this.viewer.camera.lookAt(new THREE.Vector3(basePose.position.x, basePose.position.y, 0));
|
|
//this.viewer.camera.updateMatrixWorld();
|
|
//viewer.camera.position.set(0, 0,100);
|
|
// viewer.camera.lookAt(new THREE.Vector3(0, 0, 0));
|
|
// viewer.camera.updateMatrixWorld();
|
|
}
|
|
|
|
//https://groups.google.com/g/robot-web-tools/c/CWN-_3h-yVY
|
|
//https://blog.csdn.net/qq_15204179/article/details/130833510
|
|
//var basePose = new ROSLIB.Pose(message.base_pose);
|
|
|
|
//this.viewer.camera.position.set(basePose.position.x, basePose.position.y, 6);
|
|
|
|
//this.viewer.camera.lookAt(new THREE.Vector3(basePose.position.x, basePose.position.y, 0));
|
|
//this.viewer.camera.updateMatrixWorld();
|
|
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
|
|
|
|
<!--
|
|
<h1>Simple Map Example</h1>
|
|
<p>
|
|
Run the following commands in the terminal then refresh this page. This will load a map from the
|
|
<tt>ros-groovy-rail-maps</tt>
|
|
package.
|
|
</p>
|
|
<ol>
|
|
<li><tt>roscore</tt></li>
|
|
<li><tt>rosrun map_server map_server /opt/ros/groovy/share/rail_maps/maps/ilab.pgm
|
|
0.05</tt></li>
|
|
<li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
|
|
</ol>
|
|
-->
|
|
<div id="map"></div>
|
|
|
|
|
|
</body>
|
|
</html> |