621 lines
20 KiB
HTML
621 lines
20 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 NUS_RM_Msg=new Object();
|
|
var Get_NUS_RM_Frame_Sch=0;
|
|
var Last_Get_NUS_RM_Frame_Sch=0;
|
|
|
|
var ros = new ROSLIB.Ros({
|
|
url : 'ws://localhost:9190'
|
|
});
|
|
|
|
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 listenerNUSRecordingMapMsg(){
|
|
var sub_NUS_RecordingMap=new ROSLIB.Topic({
|
|
ros : ros,
|
|
name : '/Topic_NUS_RecordingMap',
|
|
messageType : 'lu_ps20l_msgs/Msg_Bosch_RecordingMap'
|
|
});
|
|
|
|
sub_NUS_RecordingMap.subscribe(function(message){
|
|
Get_NUS_RM_Frame_Sch++;
|
|
console.log("sub_NUS_RecordingMap:"+Get_NUS_RM_Frame_Sch);
|
|
NUS_RM_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);
|
|
}
|
|
NUS_RM_Msg.MapPoint_Arr=MapPoint_Arr;
|
|
sub_NUS_RecordingMap.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>
|
|
<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){
|
|
console.log("equal");
|
|
}
|
|
else if(LastMapPointLength<MapPointLength){
|
|
console.log("add");
|
|
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;
|
|
}
|
|
}else{
|
|
console.log("minus");
|
|
}
|
|
}
|
|
|
|
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_NUS_Message_Init(){
|
|
var NUSPointNum=2000;
|
|
|
|
var Sprite_Arr=new Array();
|
|
|
|
|
|
for(let i=0;i<NUSPointNum;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 NUS=new Object();
|
|
NUS.Sprite_Arr=Sprite_Arr;
|
|
return NUS;
|
|
}
|
|
|
|
var LIDAR=Lu_Draw_LIDAR(0,0,0,0xFF0000);
|
|
var NUS = Lu_Draw_NUS_Message_Init();
|
|
var times=0;
|
|
|
|
function Timer(){
|
|
console.log("Get_NUS_RM_Frame_Sch:"+Get_NUS_RM_Frame_Sch);
|
|
//listenerBoschRecordingVisualizationMsg();
|
|
listenerNUSRecordingMapMsg();
|
|
|
|
if(times==0){
|
|
Lu_Draw_OriginCoordinate();
|
|
render();
|
|
times++;
|
|
}
|
|
|
|
|
|
if(Get_NUS_RM_Frame_Sch > 0 && Get_NUS_RM_Frame_Sch != Last_Get_NUS_RM_Frame_Sch){
|
|
Last_Get_NUS_RM_Frame_Sch = Get_NUS_RM_Frame_Sch;
|
|
//console.log("Get_NUS_RM_Frame_Sch"+Get_NUS_RM_Frame_Sch+" LEN:"+NUS_RM_Msg.MapPoint_Arr.length);
|
|
|
|
Lu_Draw_Map(NUS_RM_Msg.MapPoint_Arr);
|
|
//Lu_Draw_Map2(NUS_RM_Msg.MapPoint_Arr);
|
|
//console.log(Map1);
|
|
render();
|
|
}
|
|
}
|
|
var T1 = window.setInterval("Timer()",1000);
|
|
/**
|
|
* 光源设置
|
|
*/
|
|
//点光源
|
|
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> |