static
This commit is contained in:
蔡玲
736
static/Magic4/Mapping/HMI_Mapping_Right_BoschMapping_Sch2.html
Normal file
736
static/Magic4/Mapping/HMI_Mapping_Right_BoschMapping_Sch2.html
Normal file
@@ -0,0 +1,736 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user