736 lines
26 KiB
HTML
736 lines
26 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<script src="../jquery-2.1.0.min.js"></script>
|
||
|
|
<script src="../jquery.cookie.js"></script>
|
||
|
|
<script type="text/javascript" src="../roslib.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../Lu_Math_Driver.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 type="text/javascript" type="text/javascript">
|
||
|
|
var Bosch_MV_Msg=new Object();
|
||
|
|
var Get_Bosch_MV_Frame_Sch=0;
|
||
|
|
var Last_Get_Bosch_MV_Frame_Sch=0;
|
||
|
|
|
||
|
|
var Bosch_MM_Msg=new Object();
|
||
|
|
var Get_Bosch_MM_Frame_Sch=0;
|
||
|
|
var Last_Get_Bosch_MM_Frame_Sch=0;
|
||
|
|
|
||
|
|
|
||
|
|
var ros = new ROSLIB.Ros({
|
||
|
|
url : 'ws://localhost:9190'
|
||
|
|
//url : 'ws://localhost:9190'
|
||
|
|
});
|
||
|
|
//Lu Sync
|
||
|
|
|
||
|
|
ros.on('connection', function() {
|
||
|
|
console.log('Connected to websocket server.');
|
||
|
|
});
|
||
|
|
|
||
|
|
ros.on('error', function(error) {
|
||
|
|
console.log('Error connecting to websocket server: ', error);
|
||
|
|
});
|
||
|
|
|
||
|
|
ros.on('close', function() {
|
||
|
|
console.log('Connection to websocket server closed.');
|
||
|
|
});
|
||
|
|
|
||
|
|
function listenerBoschMapMapMsg(){
|
||
|
|
var sub_Bosch_MapMap=new ROSLIB.Topic({
|
||
|
|
ros : ros,
|
||
|
|
name : '/Topic_Bosch_MapMap',
|
||
|
|
messageType : 'lu_ps20l_msgs/Msg_Bosch_MapMap'
|
||
|
|
});
|
||
|
|
|
||
|
|
sub_Bosch_MapMap.subscribe(function(message){
|
||
|
|
Get_Bosch_MM_Frame_Sch++;
|
||
|
|
Bosch_MM_Msg.maplength=message.maplength;
|
||
|
|
var MapPoint_Arr=new Array();
|
||
|
|
for(let i=0;i<message.map.length;i++){
|
||
|
|
var MapPoint=new Object();
|
||
|
|
MapPoint.x=parseFloat(message.map[i].x);
|
||
|
|
MapPoint.y=parseFloat(message.map[i].y);
|
||
|
|
MapPoint_Arr.push(MapPoint);
|
||
|
|
}
|
||
|
|
Bosch_MM_Msg.MapPoint_Arr=MapPoint_Arr;
|
||
|
|
sub_Bosch_MapMap.unsubscribe();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function listenerBoschMapVisualizationMsg(){
|
||
|
|
var sub_Bosch_MapVisualization=new ROSLIB.Topic({
|
||
|
|
ros : ros,
|
||
|
|
name : '/Topic_Bosch_MapVisualization',
|
||
|
|
messageType : 'lu_ps20l_msgs/Msg_Bosch_MapVisualization'
|
||
|
|
});
|
||
|
|
|
||
|
|
sub_Bosch_MapVisualization.subscribe(function(message){
|
||
|
|
Get_Bosch_MV_Frame_Sch++;
|
||
|
|
Bosch_MV_Msg.timestamp=message.timestamp;
|
||
|
|
Bosch_MV_Msg.visualizationId=message.visualizationId;
|
||
|
|
Bosch_MV_Msg.status=message.status;
|
||
|
|
Bosch_MV_Msg.poseX=message.poseX;
|
||
|
|
Bosch_MV_Msg.poseY=message.poseY;
|
||
|
|
Bosch_MV_Msg.poseYaw=message.poseYaw;
|
||
|
|
Bosch_MV_Msg.delay=message.delay;
|
||
|
|
Bosch_MV_Msg.progress=message.progress;
|
||
|
|
Bosch_MV_Msg.scanlength=message.scanlength;
|
||
|
|
var Point_Arr=new Array();
|
||
|
|
for(let i=0;i<message.scan.length;i++){
|
||
|
|
var Bosch_Point=new Object();
|
||
|
|
Bosch_Point.x=parseFloat(message.scan[i].x);
|
||
|
|
Bosch_Point.y=parseFloat(message.scan[i].y);
|
||
|
|
Bosch_Point.z=parseFloat(message.scan[i].z);
|
||
|
|
//console.log(Bosch_Point);
|
||
|
|
Point_Arr.push(Bosch_Point);
|
||
|
|
}
|
||
|
|
Bosch_MV_Msg.Point_Arr=Point_Arr;
|
||
|
|
Bosch_MV_Msg.PathPoseslength=message.PathPoseslength;
|
||
|
|
var PathPosesArray=new Array();
|
||
|
|
for(let j=0;j<message.PathPoses.length;j++){
|
||
|
|
var PathPoses=new Object();
|
||
|
|
PathPoses.x=parseFloat(message.PathPoses[j].x);
|
||
|
|
PathPoses.y=parseFloat(message.PathPoses[j].y);
|
||
|
|
PathPoses.yaw=parseFloat(message.PathPoses[j].yaw);
|
||
|
|
PathPosesArray.push(PathPoses);
|
||
|
|
}
|
||
|
|
Bosch_MV_Msg.PathPosesArray=PathPosesArray;
|
||
|
|
//console.log(Bosch_RM_Msg);
|
||
|
|
sub_Bosch_MapVisualization.unsubscribe();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<title>Title</title>
|
||
|
|
<style type="text/css">
|
||
|
|
html, body {
|
||
|
|
font-family: Calibri, sans-serif;
|
||
|
|
font-size: 36px;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-wrapper {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-group {
|
||
|
|
margin: 1em;
|
||
|
|
width: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn {
|
||
|
|
background: #fff;
|
||
|
|
border: thin solid #aaa;
|
||
|
|
border-radius: 0.25em;
|
||
|
|
color: #555;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: inherit;
|
||
|
|
height: 1.5em;
|
||
|
|
margin: 1em 0 0 1em;
|
||
|
|
min-width: 1.5em;
|
||
|
|
padding: 0 0.4em;;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn svg {
|
||
|
|
fill: #555;
|
||
|
|
margin-top: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn:hover {
|
||
|
|
border-color: #777;
|
||
|
|
box-shadow: 0.03em 0.05em 0.1em rgba(0,0,0,.2);
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn:active {
|
||
|
|
background: #ddd;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn:hover svg {
|
||
|
|
fill: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn:focus {
|
||
|
|
outline: thin dotted;
|
||
|
|
outline-offset: -0.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn.disabled {
|
||
|
|
background: #bababa;
|
||
|
|
color: #888;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn.disabled svg {
|
||
|
|
fill: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-group button {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-group .threejs-btn:last-of-type {
|
||
|
|
border-radius: 0 0 0.25em 0.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-group .threejs-btn:first-of-type {
|
||
|
|
border-radius: 0.25em 0.25em 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#threejs-rotate-y-icon {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
button[id^="threejs-rotate"] {
|
||
|
|
padding: 0.1em 0.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-group.threejs-btn-group-directional {
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
left: 2.75em;
|
||
|
|
position: absolute;
|
||
|
|
top: 2.5em;
|
||
|
|
width: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-btn-group.threejs-btn-group-directional .threejs-btn {
|
||
|
|
border-radius: 0.25em;
|
||
|
|
margin: 0.1em;
|
||
|
|
padding: 0.05em 0.15em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#threejs-down svg {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
#threejs-up svg {
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
#threejs-left svg {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-help-overlay {
|
||
|
|
align-items: center;
|
||
|
|
background: rgba(0,0,0,.75);
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
justify-content: space-around;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-help-overlay.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-help-overlay-close {
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
position: absolute;
|
||
|
|
right: 1.25em;
|
||
|
|
top: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-help-overlay p {
|
||
|
|
color: #fff;
|
||
|
|
font-weight: normal;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 .75em;
|
||
|
|
font-size: 0.8em;
|
||
|
|
line-height: 1.1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.threejs-help-overlay b {
|
||
|
|
font-size: 1.25em;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
canvas {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
HMI_Mapping_Right_BoschMapping_Sch2
|
||
|
|
<div class="threejs-btn-wrapper">
|
||
|
|
<button id="threejs-reset" class="threejs-btn">Reset</button>
|
||
|
|
<div class="threejs-btn-group">
|
||
|
|
<button id="threejs-zoom-in" class="threejs-btn">+</button>
|
||
|
|
<button id="threejs-zoom-out" class="threejs-btn">-</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="threejs-btn-group threejs-btn-group-directional">
|
||
|
|
<button id="threejs-left" class="threejs-btn">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
|
||
|
|
<path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div class="threejs-up-down-wrapper">
|
||
|
|
<button id="threejs-up" class="threejs-btn">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
|
||
|
|
<path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button id="threejs-down" class="threejs-btn">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
|
||
|
|
<path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button id="threejs-right" class="threejs-btn">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
|
||
|
|
<path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="threejs-content"></div>
|
||
|
|
<script>
|
||
|
|
//https://threejs.org/docs/#examples/en/loaders/PCDLoader
|
||
|
|
var scene = new THREE.Scene();
|
||
|
|
|
||
|
|
function Lu_Draw_Text(Position,text,color){
|
||
|
|
|
||
|
|
var textLoad = new THREE.FontLoader().load('../js/three.js-dev/examples/fonts/gentilis_regular.typeface.json',function(font){
|
||
|
|
//var textLoad = new THREE.FontLoader().load('js/three.js-dev/examples/fonts/SimHei_Regular.json',function(font){
|
||
|
|
var txtGeo = new THREE.TextGeometry(text,{
|
||
|
|
font: font,
|
||
|
|
size: 0.5,
|
||
|
|
height: 0.01,
|
||
|
|
curveSegments: 12,
|
||
|
|
bevelEnabled: true,
|
||
|
|
bevelThickness: 0.0,
|
||
|
|
bevelSize: 0.0,
|
||
|
|
bevelSegments: 3
|
||
|
|
});
|
||
|
|
var txtMater = new THREE.MeshBasicMaterial({color: color});
|
||
|
|
var txtMesh = new THREE.Mesh(txtGeo,txtMater);
|
||
|
|
txtMesh.position.set(Position.x+0.05,Position.y-0.05,0);
|
||
|
|
scene.add(txtMesh);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//draw line
|
||
|
|
function Lu_Draw_Line(P1,P2,color){
|
||
|
|
const material = new THREE.LineBasicMaterial( { color: color } );
|
||
|
|
const points = [];
|
||
|
|
points.push(P1);
|
||
|
|
points.push(P2);
|
||
|
|
const geometry = new THREE.BufferGeometry().setFromPoints( points );
|
||
|
|
const line = new THREE.Line( geometry, material);
|
||
|
|
scene.add( line);
|
||
|
|
return line;
|
||
|
|
}
|
||
|
|
|
||
|
|
var LastPathPosesLength=0;
|
||
|
|
var LastMapPointLength=0;
|
||
|
|
var MapSprite_Arr=new Array();
|
||
|
|
function Lu_Draw_Map(MapPointArray){
|
||
|
|
console.log("scene_remove");
|
||
|
|
for(let j=0;j<MapSprite_Arr.length;j++){
|
||
|
|
|
||
|
|
scene.remove(MapSprite_Arr[j]);
|
||
|
|
const mesh = MapSprite_Arr[j].children[ 0 ];
|
||
|
|
if(mesh!=null)mesh.geometry.dispose(); // FIX
|
||
|
|
if(mesh!=null)mesh.material.dispose(); // FIX
|
||
|
|
}
|
||
|
|
for(let i=0;i<MapPointArray.length;i++){
|
||
|
|
var material = new THREE.SpriteMaterial( { color : 0xFFFFFF } );
|
||
|
|
|
||
|
|
var particle = new THREE.Sprite(material);
|
||
|
|
particle.position.x=MapPointArray[i].x;
|
||
|
|
particle.position.y=MapPointArray[i].y;
|
||
|
|
particle.position.z=0;
|
||
|
|
particle.scale.x = particle.scale.y = 0.1;
|
||
|
|
scene.add(particle);
|
||
|
|
MapSprite_Arr.push(particle);
|
||
|
|
}
|
||
|
|
//var Map=new Object();
|
||
|
|
//Map.Sprite_Arr=Sprite_Arr;
|
||
|
|
//return Map;
|
||
|
|
}
|
||
|
|
|
||
|
|
function Lu_Draw_Map2(MapPointArray){
|
||
|
|
var MapPointLength=MapPointArray.length;
|
||
|
|
if(MapPointLength==LastMapPointLength){
|
||
|
|
|
||
|
|
}
|
||
|
|
else if(LastMapPointLength<MapPointLength){
|
||
|
|
var material = new THREE.SpriteMaterial( { color : 0xFFFFFF } );
|
||
|
|
|
||
|
|
if(LastMapPointLength==0){
|
||
|
|
for (let i = 0; i < MapPointLength; i++) {
|
||
|
|
var particle = new THREE.Sprite(material);
|
||
|
|
particle.position.x=MapPointArray[i].x;
|
||
|
|
particle.position.y=MapPointArray[i].y;
|
||
|
|
particle.position.z=0;
|
||
|
|
particle.scale.x = particle.scale.y = 0.1;
|
||
|
|
scene.add(particle);
|
||
|
|
}
|
||
|
|
LastMapPointLength = MapPointLength;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
for (let i = LastMapPointLength - 1; i < MapPointLength; i++) {
|
||
|
|
var particle = new THREE.Sprite(material);
|
||
|
|
particle.position.x=MapPointArray[i].x;
|
||
|
|
particle.position.y=MapPointArray[i].y;
|
||
|
|
particle.position.z=0;
|
||
|
|
particle.scale.x = particle.scale.y = 0.1;
|
||
|
|
scene.add(particle);
|
||
|
|
}
|
||
|
|
LastMapPointLength = MapPointLength;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function Lu_Draw_PathPoses(PathPosesArray){
|
||
|
|
|
||
|
|
var PathPosesLength=PathPosesArray.length;
|
||
|
|
if(PathPosesLength==LastPathPosesLength){
|
||
|
|
//console.log("state0 LastPathPosesLength:"+LastPathPosesLength +" PathPosesLength:"+PathPosesLength);
|
||
|
|
}
|
||
|
|
else if(LastPathPosesLength<PathPosesLength) {
|
||
|
|
|
||
|
|
|
||
|
|
const material = new THREE.LineBasicMaterial({color: 0xffffff});
|
||
|
|
const points = [];
|
||
|
|
if (LastPathPosesLength == 0) {
|
||
|
|
//console.log("state1 LastPathPosesLength:" + LastPathPosesLength + " PathPosesLength:" + PathPosesLength);
|
||
|
|
for (let i = 0; i < PathPosesLength; i++) {
|
||
|
|
var P = PathPosesArray[i];
|
||
|
|
points.push(new THREE.Vector3(P.x, P.y, 0));
|
||
|
|
}
|
||
|
|
LastPathPosesLength = PathPosesLength;
|
||
|
|
const geometry = new THREE.BufferGeometry().setFromPoints(points);
|
||
|
|
const line = new THREE.Line(geometry, material);
|
||
|
|
scene.add(line);
|
||
|
|
} else {
|
||
|
|
//console.log("state2 LastPathPosesLength:" + LastPathPosesLength + " PathPosesLength:" + PathPosesLength);
|
||
|
|
for (let i = LastPathPosesLength - 1; i < PathPosesLength; i++) {
|
||
|
|
var P = PathPosesArray[i];
|
||
|
|
points.push(new THREE.Vector3(P.x, P.y, 0));
|
||
|
|
}
|
||
|
|
LastPathPosesLength = PathPosesLength;
|
||
|
|
const geometry = new THREE.BufferGeometry().setFromPoints(points);
|
||
|
|
const line = new THREE.Line(geometry, material);
|
||
|
|
scene.add(line);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function Lu_Draw_OriginCoordinate() {
|
||
|
|
var X_P=new Object();
|
||
|
|
X_P.x=5;
|
||
|
|
X_P.y=0;
|
||
|
|
|
||
|
|
var Y_P=new Object();
|
||
|
|
Y_P.x=0;
|
||
|
|
Y_P.y=5;
|
||
|
|
|
||
|
|
Lu_Draw_Line(new THREE.Vector3(0, 0, 0), new THREE.Vector3(X_P.x, X_P.y, 0), 0x00ff00);
|
||
|
|
Lu_Draw_Line(new THREE.Vector3(0, 0, 0), new THREE.Vector3(Y_P.x, Y_P.y, 0), 0xff0000);
|
||
|
|
Lu_Draw_Line(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 5), 0x0000ff);
|
||
|
|
|
||
|
|
Lu_Draw_Text(X_P,"X",0x00ff00);
|
||
|
|
Lu_Draw_Text(Y_P,"Y",0xff0000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function Lu_Draw_LIDAR(x,y,t,color){
|
||
|
|
const curve = new THREE.EllipseCurve(
|
||
|
|
x, y, // ax, aY
|
||
|
|
0.5, 0.5, // xRadius, yRadius
|
||
|
|
0, 2*Math.PI, // aStartAngle, aEndAngle
|
||
|
|
false, // aClockwise
|
||
|
|
0 // aRotation
|
||
|
|
);
|
||
|
|
|
||
|
|
const points = curve.getPoints( 50 );
|
||
|
|
const geometry = new THREE.BufferGeometry().setFromPoints( points );
|
||
|
|
|
||
|
|
const material = new THREE.LineBasicMaterial( { color : color } );
|
||
|
|
|
||
|
|
// Create the final object to add to the scene
|
||
|
|
const ellipse = new THREE.Line( geometry, material );
|
||
|
|
scene.add(ellipse);
|
||
|
|
|
||
|
|
|
||
|
|
var Heading=Lu_GetNextPoint_By_xs_ys_dirdeg(x,y,t,1.0);
|
||
|
|
|
||
|
|
const points_l = [];
|
||
|
|
points_l.push(new THREE.Vector3(x,y,0.2));
|
||
|
|
points_l.push(new THREE.Vector3(Heading.x,Heading.y,0.2));
|
||
|
|
const geometry_l = new THREE.BufferGeometry().setFromPoints( points_l );
|
||
|
|
const line = new THREE.Line( geometry_l, material);
|
||
|
|
scene.add(line);
|
||
|
|
|
||
|
|
var lidar=new Object();
|
||
|
|
lidar.circle=ellipse;
|
||
|
|
lidar.line=line;
|
||
|
|
return lidar;
|
||
|
|
}
|
||
|
|
|
||
|
|
function Lu_Draw_Bosch_Message_Init(){
|
||
|
|
var BoschPointNum=2000;
|
||
|
|
|
||
|
|
var Sprite_Arr=new Array();
|
||
|
|
|
||
|
|
|
||
|
|
for(let i=0;i<BoschPointNum;i++){
|
||
|
|
var material = new THREE.SpriteMaterial( { color : 0xFF0000 } );
|
||
|
|
|
||
|
|
var particle = new THREE.Sprite(material);
|
||
|
|
particle.position.x=0;
|
||
|
|
particle.position.y=0;
|
||
|
|
particle.position.z=0;
|
||
|
|
particle.scale.x = particle.scale.y = 0.05;
|
||
|
|
scene.add(particle);
|
||
|
|
Sprite_Arr.push(particle);
|
||
|
|
}
|
||
|
|
var Bosch=new Object();
|
||
|
|
Bosch.Sprite_Arr=Sprite_Arr;
|
||
|
|
return Bosch;
|
||
|
|
}
|
||
|
|
var LIDAR=Lu_Draw_LIDAR(0,0,0,0xFF0000);
|
||
|
|
var Bosch = Lu_Draw_Bosch_Message_Init();
|
||
|
|
var times=0;
|
||
|
|
|
||
|
|
function Timer(){
|
||
|
|
listenerBoschMapVisualizationMsg();
|
||
|
|
listenerBoschMapMapMsg();
|
||
|
|
|
||
|
|
if(times==0){
|
||
|
|
Lu_Draw_OriginCoordinate();
|
||
|
|
render();
|
||
|
|
times++;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (Get_Bosch_MV_Frame_Sch > 0 && Get_Bosch_MV_Frame_Sch != Last_Get_Bosch_MV_Frame_Sch) {
|
||
|
|
Last_Get_Bosch_MV_Frame_Sch = Get_Bosch_MV_Frame_Sch;
|
||
|
|
|
||
|
|
LIDAR.circle.position.x=Bosch_MV_Msg.poseX;
|
||
|
|
LIDAR.circle.position.y=Bosch_MV_Msg.poseY;
|
||
|
|
LIDAR.circle.position.z=0.2;
|
||
|
|
LIDAR.line.position.x=Bosch_MV_Msg.poseX;
|
||
|
|
LIDAR.line.position.y= Bosch_MV_Msg.poseY;
|
||
|
|
LIDAR.line.position.z= 0.2;
|
||
|
|
LIDAR.line.rotation.z = Bosch_MV_Msg.poseYaw;
|
||
|
|
//LIDAR.circle.position.copy(new THREE.Vector3(Bosch_MV_Msg.poseX, Bosch_MV_Msg.poseY, 0.2));
|
||
|
|
//LIDAR.line.position.copy(new THREE.Vector3(Bosch_MV_Msg.poseX, Bosch_MV_Msg.poseY, 0.2));
|
||
|
|
//LIDAR.line.rotation.z = Bosch_MV_Msg.poseYaw;
|
||
|
|
|
||
|
|
console.log("progress:"+Bosch_MV_Msg.progress);
|
||
|
|
$.cookie("BoschMapping_Sch2_Progress",Bosch_MV_Msg.progress,{secure:true});
|
||
|
|
//console.log(Last_Get_Bosch_RV_Frame_Sch);
|
||
|
|
for (let i = 0; i < Math.min(Bosch_MV_Msg.Point_Arr.length,Bosch.Sprite_Arr.length); i++) {
|
||
|
|
var GP = Bosch_MV_Msg.Point_Arr[i];
|
||
|
|
//console.log(Bosch_Point);
|
||
|
|
Bosch.Sprite_Arr[i].position.x=GP.x;
|
||
|
|
Bosch.Sprite_Arr[i].position.y=GP.y;
|
||
|
|
Bosch.Sprite_Arr[i].position.z=GP.z;
|
||
|
|
//Bosch.Sprite_Arr[i].position.copy(new THREE.Vector3(GP.x, GP.y, GP.z));
|
||
|
|
}
|
||
|
|
Lu_Draw_PathPoses(Bosch_MV_Msg.PathPosesArray);
|
||
|
|
render();
|
||
|
|
}
|
||
|
|
|
||
|
|
if(Get_Bosch_MM_Frame_Sch > 0 && Get_Bosch_MM_Frame_Sch != Last_Get_Bosch_MM_Frame_Sch){
|
||
|
|
Last_Get_Bosch_MM_Frame_Sch = Get_Bosch_MM_Frame_Sch;
|
||
|
|
|
||
|
|
// Lu_Draw_Map(Bosch_MM_Msg.MapPoint_Arr);
|
||
|
|
|
||
|
|
Lu_Draw_Map2(Bosch_MM_Msg.MapPoint_Arr);
|
||
|
|
|
||
|
|
render();
|
||
|
|
//console.log(Map1);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var T1 = window.setInterval("Timer()",100);
|
||
|
|
/**
|
||
|
|
* 光源设置
|
||
|
|
*/
|
||
|
|
//点光源
|
||
|
|
var point = new THREE.PointLight(0xffffff);
|
||
|
|
point.position.set(10, 10, 10); //点光源位置
|
||
|
|
scene.add(point); //点光源添加到场景中
|
||
|
|
//环境光
|
||
|
|
var ambient = new THREE.AmbientLight(0x444444);
|
||
|
|
scene.add(ambient);
|
||
|
|
/**
|
||
|
|
* 相机设置
|
||
|
|
*/
|
||
|
|
var width = window.innerWidth; //窗口宽度
|
||
|
|
var height = window.innerHeight; //窗口高度
|
||
|
|
var k = width / height; //窗口宽高比
|
||
|
|
var s = 30;//5; //三维场景显示范围控制系数，系数越大，显示的范围越大
|
||
|
|
//创建相机对象
|
||
|
|
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
|
||
|
|
camera.position.set(0, 0, 20);
|
||
|
|
//camera.position.set(0, 0, 10); //设置相机位置
|
||
|
|
//console.log("Rotation", camera.rotation);
|
||
|
|
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 创建渲染器对象
|
||
|
|
*/
|
||
|
|
var renderer = new THREE.WebGLRenderer({ antialias: true });
|
||
|
|
renderer.setSize(width, height);//设置渲染区域尺寸
|
||
|
|
renderer.setClearColor(0x000000, 1); //设置背景颜色
|
||
|
|
//renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
|
||
|
|
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
|
||
|
|
//执行渲染操作 指定场景、相机作为参数
|
||
|
|
function render() {
|
||
|
|
renderer.render(scene,camera);//执行渲染操作
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
|
||
|
|
|
||
|
|
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
|
||
|
|
controls.target.set( 0, 0, 0 ); // view direction perpendicular to XY-plane
|
||
|
|
controls.enableRotate = false;
|
||
|
|
controls.enableZoom = true; // optional
|
||
|
|
controls.mouseButtons = {
|
||
|
|
LEFT: THREE.MOUSE.RIGHT,
|
||
|
|
MIDDLE: THREE.MOUSE.MIDDLE,
|
||
|
|
RIGHT: THREE.MOUSE.LEFT
|
||
|
|
}
|
||
|
|
controls.addEventListener('change', render);//监听鼠标、键盘事件
|
||
|
|
|
||
|
|
|
||
|
|
var Szoom = 30;
|
||
|
|
|
||
|
|
$( "#threejs-reset" ).click(function(e){
|
||
|
|
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
Szoom = 30;
|
||
|
|
s = Szoom;
|
||
|
|
camera.left=-s*k;
|
||
|
|
camera.right=s*k;
|
||
|
|
camera.top=s;
|
||
|
|
camera.bottom=-s;
|
||
|
|
camera.near=1;
|
||
|
|
camera.far=1000;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
controls.reset();
|
||
|
|
//render();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$( "#threejs-zoom-in" ).click(function(e){
|
||
|
|
|
||
|
|
if(Szoom>=5) {
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
Szoom -= 1;
|
||
|
|
s = Szoom;
|
||
|
|
camera.left = -s * k;
|
||
|
|
camera.right = s * k;
|
||
|
|
camera.top = s;
|
||
|
|
camera.bottom = -s;
|
||
|
|
camera.near=1;
|
||
|
|
camera.far=1000;
|
||
|
|
//camera.position.set(0, 0, 20);
|
||
|
|
//camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
//render();
|
||
|
|
}
|
||
|
|
console.log(Szoom);
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#threejs-zoom-out" ).click(function(e){
|
||
|
|
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
Szoom += 1;
|
||
|
|
s = Szoom;
|
||
|
|
camera.left=-s*k;
|
||
|
|
camera.right=s*k;
|
||
|
|
camera.top=s;
|
||
|
|
camera.bottom=-s;
|
||
|
|
camera.near=1;
|
||
|
|
camera.far=1000;
|
||
|
|
//camera.position.set(0, 0, 20);
|
||
|
|
//camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
//render();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$( "#threejs-up" ).click(function(e){
|
||
|
|
/*
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
camera.top=camera.top+1;
|
||
|
|
camera.bottom=camera.bottom+1;
|
||
|
|
*/
|
||
|
|
camera.position.y=camera.position.y+1;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
//render();
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#threejs-down" ).click(function(e){
|
||
|
|
/*
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
camera.top=camera.top-1;
|
||
|
|
camera.bottom=camera.bottom-1;
|
||
|
|
*/
|
||
|
|
camera.position.y=camera.position.y-1;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
//render();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$( "#threejs-left" ).click(function(e){
|
||
|
|
/*
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
camera.left= camera.left+1;
|
||
|
|
camera.right=camera.right+1;
|
||
|
|
*/
|
||
|
|
camera.position.x=camera.position.x-1;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
//render();
|
||
|
|
});
|
||
|
|
|
||
|
|
$( "#threejs-right" ).click(function(e){
|
||
|
|
/*
|
||
|
|
width = window.innerWidth; //窗口宽度
|
||
|
|
height = window.innerHeight; //窗口高度
|
||
|
|
k = width / height; //窗口宽高比
|
||
|
|
camera.left= camera.left-1;
|
||
|
|
camera.right=camera.right-1;
|
||
|
|
*/
|
||
|
|
camera.position.x=camera.position.x+1;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
//render();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|