joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

三维车站客流管理模块代码修改

Browse Source
This commit is contained in:
sunzhenyu 2021-02-24 18:15:07 +08:00
parent f3e95ffccb
commit 6c1fef1bea
12 changed files with 2791 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

438
src/jlmap3d/jl3dstationmanager/component/jl3dactionmanager.js Normal file
View File

@ -0,0 +1,438 @@
import { Staticmodel } from '@/jlmap3d/jl3dtrafficplan/loader/stationconfig.js';
//静态资源文件路劲
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//loader
import { FBXLoader } from '@/jlmap3d/main/loaders/FBXLoader';
//轨道视角控制
import { StationManagerControls } from '@/jlmap3d/jl3dstationmanager/controls/stationManagerControls';
//模型管理器
import { ModelManager } from '@/jlmap3d/jl3dstationmanager/loader/loader.js';
//骨骼动画模型辅助工具
import { SkeletonUtils } from '@/jlmap3d/main/utils/SkeletonUtils.js';
//获取信息接口
import { getPublishMapVersion, getPublishMapDetail,getPublish3dMapDetail} from '@/api/jlmap3d/load3ddata';
//cctv站台对象
import { PasserStation } from '@/jlmap3d/jl3dtrafficplan/model/passerstation.js';
//cctv检票机对象
import { PasserCheckDoor } from '@/jlmap3d/jl3dtrafficplan/model/passercheckdoor.js';
//cctv列车对象
import { PasserTrain } from '@/jlmap3d/jl3dtrafficplan/model/passertrain.js';
//cctv行人对象
import { PasserHuman } from '@/jlmap3d/jl3dtrafficplan/model/passerhuman.js';
//cctv渲染器
import { PasserRender } from '@/jlmap3d/jl3dpassflow/passerrender/passerrender.js';
//cctv行人ai
import { PasserAi } from '@/jlmap3d/jl3dtrafficplan/passerai/passerai.js';
//行人寻路相关工具
import { ZoneManager } from '@/jlmap3d/jl3dtrafficplan/model/zonemanager.js';
import { PathFinder } from '@/jlmap3d/jl3dtrafficplan/passerai/pathfinder.js';
//cctv通信工具
import { PassflowConnect } from '@/jlmap3d/jl3dtrafficplan/connect/stationconnect.js';
import StompClient from '@/utils/sock';
import store from '@/store/index';
// import { Loading } from 'element-ui';
import {Stats} from '@/jlmap3d/main/lib/stats.min.js';
//动画播放相关
let clock = new THREE.Clock();
let delta;
let scene,camerass,renderer;
let aiswitch = 0;
//动画组
let mixers = [];
//车站摄像机模型
let monitor;
//寻路相关对象
let passerZone = new ZoneManager();
let pathFinder = new PathFinder();
let path;
//设备动画action组
let deviceaction = [];
//控制帧率的webworker线程
let passerWebWork = new Worker(JL3D_LOCAL_STATIC+"/workertest/trafficplan/trafficstation.js");
//老版本临时ai控制
let olddataai = false;
export function Jl3dStationManager(dom,skinCode,routegroup,viewMap,initCode) {
// let stats = new Stats();
// dom.appendChild( stats.dom );
let scope = this;
this.dom = dom;
this.nowcode = null;
this.animateswitch = false;
this.signallights = [];
this.mixers = [];
this.showmodel = null;
this.allStationData = [];
this.humanWaitTop = 0;
this.humanWaitDown = 0;
this.humanInSpeed = 0;
this.humanOutSpeed = 0;
let waitForCreatIn = [];
let waitForCreatOutTop = [];
let waitForCreatOutDown = [];
//定义相机
camerass = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.01, 10000);
camerass.position.set(0,200,0);
camerass.aspect = dom.offsetWidth / dom.offsetHeight;
camerass.updateProjectionMatrix();
//定义场景(渲染容器)
scene = new THREE.Scene();
// scene.background = new THREE.Color(0xa0a0a0);
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
var grid = new THREE.GridHelper( 1000, 100, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
let passerRender = new PasserRender(viewMap);
passerRender.initView(dom,scene,camerass);
passerRender.reSize(scope.dom.offsetWidth,scope.dom.offsetHeight);
//定义全局光
let ambientLight = new THREE.AmbientLight(0xffffff, 1.3);
scene.add(ambientLight);
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 4000, 0 );
scene.add( light );
let controls = new THREE.StationManagerControls(camerass, dom,camerass,scene,mesh);
// controls.maxPolarAngle = Math.PI / 2;
// controls.minPolarangle = Math.PI / 5;
// controls.maxDistance = 800;
controls.screenSpacePanning = true;
controls.target.set( 1, 0, 0 );
controls.controlMode = "Draw";
controls.update();
this.selectmodel = null;
// let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
//进站运动中乘客
let humanlist = new THREE.Group();
//上行等待上车乘客
let topWaitPassers = new THREE.Group();
//下行等待上车乘客
let downWaitPassers = new THREE.Group();
//出站乘客
let outStationPassers = new THREE.Group();
let passerHuman = new PasserHuman();
let passerAi = new PasserAi(passerZone,pathFinder);
this.anime = null;
this.modelmanager = new ModelManager();
// let loadingInstance = Loading.service({ fullscreen: true });
let stationlist = [];
let socktest = null;
let passerStation = new PasserStation();
let passerCheckDoor = new PasserCheckDoor();
let passerTrain = new PasserTrain();
// document.addEventListener( "mousedown", onselect, false );
this.modelmanager.loadpromise(Staticmodel, scope.mixers,"2").then(function (data) {
// console.log(scope.modelmanager.station.mesh.getObjectByName("top"));
// let testtop = scope.modelmanager.station.mesh.getObjectByName("down");
// for(let i=0;i<testtop.children.length;i++){
// console.log(testtop.children[i].matrixWorld.elements[12]);
// console.log(testtop.children[i].matrixWorld.elements);
// }
// console.log(scope.modelmanager.station.mesh.getObjectByName("down"));
passerStation.initStationAnimation(scope.modelmanager.station.mesh,mixers,deviceaction,scene);
passerCheckDoor.initCheckDoorInAnimation(scope.modelmanager.zhajiin.mesh,mixers,deviceaction,scene);
passerCheckDoor.initCheckDoorOutAnimation(scope.modelmanager.zhajiout.mesh,mixers,deviceaction,scene);
passerTrain.initTrain(scope.modelmanager.train.mesh,mixers,deviceaction,scene);
scene.add(scope.modelmanager.section.mesh);
monitor = scope.modelmanager.monitor.mesh;
scene.add(monitor);
console.log("animate");
animate();
})
this.initTrafficStart = function(){
passerStation.initCodeStation(initCode);
scope.humanWaitTop = passerStation.nowStation.toppassers;
scope.humanWaitDown = passerStation.nowStation.downpassers;
scope.humanInSpeed = 0;
scope.humanOutSpeed = 0;
passerHuman.speed = scope.humanInSpeed;
passerAi.initPasser(humanlist,topWaitPassers,downWaitPassers,passerHuman,scope);
updatePasserData(humanlist.children.length,topWaitPassers.children.length,downWaitPassers.children.length,outStationPassers.children.length,passerHuman.speed);
scope.resetscene();
}
this.changestation = function(stationname){
passerStation.changestation(stationname);
// console.log(passerStation.nowStation);
scope.humanWaitTop = passerStation.nowStation.toppassers;
scope.humanWaitDown = passerStation.nowStation.downpassers;
passerHuman.speed = passerStation.nowStation.topspeed + passerStation.nowStation.downspeed;
updatePasserData(humanlist.children.length,topWaitPassers.children.length,downWaitPassers.children.length,outStationPassers.children.length,passerHuman.speed);
scope.resetscene();
}
this.updateNowStationData = function(){
for(let i=0;i<passerStation.nowStation.topspeed;i++){
let newIn = {
overGoal:"top",
};
waitForCreatIn.push(newIn);
}
for(let i=0;i<passerStation.nowStation.downspeed;i++){
let newIn = {
overGoal:"down",
};
waitForCreatIn.push(newIn);
}
scope.humanInSpeed = passerStation.nowStation.topspeed+passerStation.nowStation.downspeed;
passerHuman.speed = scope.humanInSpeed;
passerWebWork.postMessage(["changespeed",scope.humanInSpeed/30]);
}
this.updateNowLeaveData = function(direct,outNum){
if(direct == "top"){
waitForCreatOutTop = getnum(outNum,17);
// console.log(waitForCreatOutTop);
for(let i=0;i<waitForCreatOutTop.length;i++){
for(let j=0;j<waitForCreatOutTop[i];j++){
setTimeout(function(){
// console.log(passerZone.list["standtop"].doorpoints[i]);
passerHuman.newHumanCreate(outStationPassers,passerZone.list["standtop"].doorpoints[i],5,"top",i);
}, Math.random()*1000*j);
}
}
}else{
waitForCreatOutDown = getnum(outNum,17);
for(let i=0;i<waitForCreatOutDown.length;i++){
for(let j=0;j<waitForCreatOutDown[i];j++){
setTimeout(function(){
// console.log(passerZone.list["standdown"].doorpoints[i]);
passerHuman.newHumanCreate(outStationPassers,passerZone.list["standdown"].doorpoints[i],5,"down",i);
}, Math.random()*1000*j);
}
}
}
}
this.resetscene = function(){
aiswitch = 1;
passerAi.toppasserin = false;
passerAi.downpasserin = false;
//下车控制开关
passerAi.toppasseron = false;
passerAi.downpasseron = false;
passerAi.toppasserinNum = 0;
passerAi.downpasserinNum = 0;
passerTrain.toptrain.nowcode = null;
passerTrain.downtrain.nowcode = null;
// humanlist = new THREE.Group();
for(let j=0; j<humanlist.children.length;j++){
humanlist.remove(humanlist.children[j]);
j--;
// j--;
}
for(let j=0; j<topWaitPassers.children.length;j++){
topWaitPassers.remove(topWaitPassers.children[j]);
j--;
// j--;
}
for(let j=0; j<downWaitPassers.children.length;j++){
downWaitPassers.remove(downWaitPassers.children[j]);
j--;
// j--;
}
for(let j=0; j<outStationPassers.children.length;j++){
outStationPassers.remove(outStationPassers.children[j]);
j--;
// j--;
}
passerTrain.toptrain.position.y = -20000;
passerTrain.downtrain.position.y = -20000;
deviceaction.down.action.reset();
deviceaction.down.action.time = deviceaction.down.action._clip.duration;
deviceaction.down.action.timeScale = -1;
deviceaction.down.action.play();
deviceaction.top.action.reset();
deviceaction.top.action.time = deviceaction.down.action._clip.duration;
deviceaction.top.action.timeScale = -1;
deviceaction.top.action.play();
for(let an=passerTrain.toptrain.action.top.length-1;an>=0;an--){
passerTrain.toptrain.action.top[an].reset();
passerTrain.toptrain.action.top[an].time = passerTrain.toptrain.action.top[an]._clip.duration;
passerTrain.toptrain.action.top[an].timeScale = -1;
passerTrain.toptrain.action.top[an].play();
}
for(let an=passerTrain.toptrain.action.down.length-1;an>=0;an--){
passerTrain.toptrain.action.down[an].reset();
passerTrain.toptrain.action.down[an].time = passerTrain.toptrain.action.down[an]._clip.duration;
passerTrain.toptrain.action.down[an].timeScale = -1;
passerTrain.toptrain.action.down[an].play();
}
// for(let an=actions.length-1;an>=0;an--){
// actions[an].reset();
// actions[an].time = actions[an]._clip.duration;
// actions[an].timeScale = -1;
// actions[an].play();
// }
setTimeout(function(){
passerAi.initPasser(humanlist,topWaitPassers,downWaitPassers,passerHuman,scope);
aiswitch = 0;
}, 2000);
}
function startWorker(){
let updateaianimate = setInterval(
function(){
// console.log("?");
if(aiswitch == 0){
updatePasserData(humanlist.children.length,topWaitPassers.children.length,downWaitPassers.children.length,outStationPassers.children.length,passerHuman.speed);
passerHuman.moveAnimateUpdate(humanlist,topWaitPassers,downWaitPassers,outStationPassers,passerHuman);
passerAi.aiUpdate(humanlist,topWaitPassers,downWaitPassers,outStationPassers,passerHuman,passerCheckDoor,deviceaction);
// passerZone.zoneActionCheck(humanlist,passerHuman,passerCheckDoor,deviceaction);
delta = clock.getDelta();
for(let i=mixers.length-1;i>=0;i--){
if(mixers[i]._actions[0].isRunning()){
mixers[i].update( delta );
}
}
// for(let i=topWaitPassers.children.length-1;i>=0;i--){
// if(topWaitPassers.children[i].mixer._actions[0].isRunning()){
// topWaitPassers.children[i].mixer.update( delta );
// }
// }
// for(let i=downWaitPassers.children.length-1;i>=0;i--){
// if(downWaitPassers.children[i].mixer._actions[0].isRunning()){
// downWaitPassers.children[i].mixer.update( delta );
// }
// }
// for(let i=outStationPassers.children.length-1;i>=0;i--){
// if(outStationPassers.children[i].mixer._actions[0].isRunning()){
// outStationPassers.children[i].mixer.update( delta );
// }
// }
// for(let i=humanlist.children.length-1;i>=0;i--){
// if(humanlist.children[i].mixer._actions[0].isRunning()){
// humanlist.children[i].mixer.update( delta );
// }
// }
}
}
, 100);
passerWebWork.onmessage = function (event) {
if(aiswitch == 0){
// console.log(humanlist.children.length);
this.allStationData = [];
if(waitForCreatIn.length>0){
let direct = Math.floor(Math.random()*(3-1+1))+1;
//1--top
//2-- down
if(direct == 1){
passerHuman.newHumanCreate(humanlist,passerZone.getzoneposition("enter1"),0,waitForCreatIn[0].overGoal);
}else{
passerHuman.newHumanCreate(humanlist,passerZone.getzoneposition("enter2"),0,waitForCreatIn[0].overGoal);
}
waitForCreatIn.shift();
}
}
};
}
//
// function onselect(event){
// if(event.button == '0'){
//
// //定义光线
// let raycaster = new THREE.Raycaster();
// //定义平面鼠标点击坐标
// let mouse = new THREE.Vector2();
// mouse.x = (event.clientX / scope.dom.offsetWidth) * 2 - 1;
// mouse.y = -(event.clientY / scope.dom.offsetHeight) * 2 + 1;
//
// raycaster.setFromCamera( mouse, camerass );
//
// let intersects = raycaster.intersectObject(scope.modelmanager.station.mesh,true);
// console.log(intersects[0].point);
// }
// }
//循环渲染函数
function animate() {
passerRender.update();
// console.log(passerRender);
// console.log("ss");
// if(passerRender.state == "freeview"){
controls.update();
// }
// delta = clock.getDelta();
requestAnimationFrame(animate);
}
window.onresize = function () {
passerRender.reSize(scope.dom.offsetWidth,scope.dom.offsetHeight);
}
this.switchviews = function(viewmode){
passerRender.changeRenderMode(viewmode);
}
function getnum(num,pnum){
let re = [];
let base = Math.floor(num/pnum);
let reset = num%pnum;
for(let i=0;i<pnum;i++){
let nownum = base+(i<reset?1:0);
re.push(nownum);
}
return re;
}
}

1518
src/jlmap3d/jl3dstationmanager/controls/TransformControls.js Normal file
View File

File diff suppressed because it is too large Load Diff

96
src/jlmap3d/jl3dstationmanager/controls/stationManagerControls.js
View File

@ -13,20 +13,33 @@
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
THREE.StationManagerControls = function ( object, domElement ) {
THREE.StationManagerControls = function ( object, domElement ,camera,scene) {
this.object = object;
this.planeMesh = [];
this.data = {
stationstandlist : null,
trainlisttest : null
};
this.animateswitch = null;
this.scene = null;
//控制模式切换
//画线:Orbit 绘图:Draw
this.controlMode = "Orbit";
this.drawColor = 0x2894FF;
this.drawSwitch = false;
this.drawGroup = new THREE.Group();
scene.add(this.drawGroup);
let drawMesh = null;
let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
let intersects = null;
let drawStartPoint = null;
let drawEndPoint = null;
this.domElement = ( domElement !== undefined ) ? domElement : document;
@ -96,6 +109,10 @@ THREE.StationManagerControls = function ( object, domElement ) {
//
// public methods
//
this.initPlaneMesh = function (planeMesh){
scope.planeMesh["1floor"] = planeMesh.topfloor;
scope.planeMesh["2floor"] = planeMesh.downfloor;
};
this.getPolarAngle = function () {
@ -729,7 +746,7 @@ THREE.StationManagerControls = function ( object, domElement ) {
// prevents the browser from setting it automatically.
scope.domElement.focus ? scope.domElement.focus() : window.focus();
if(scope.controlMode == "orbit"){
if(scope.controlMode == "Orbit"){
switch ( event.button ) {
case scope.mouseButtons.RIGHT:
@ -779,11 +796,29 @@ THREE.StationManagerControls = function ( object, domElement ) {
}
if(scope.controlMode == "Draw"){
var geometry = new THREE.PlaneGeometry( 20, 20, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
plane.position.x = 200;
if(scope.drawSwitch == true){
var geometry = new THREE.PlaneGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: scope.drawColor, side: THREE.DoubleSide} );
drawMesh = new THREE.Mesh( geometry, material );
drawMesh.renderOrder = 8;
// drawMesh.rotation.x = Math.PI/2;
scope.drawGroup.add( drawMesh );
// let edges = new THREE.EdgesHelper( drawMesh, 0x0000C6 );//设置边框，可以旋转
// drawMesh.add( edges );
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
for(let k in scope.planeMesh){
intersects = raycaster.intersectObject( scope.planeMesh[k] );
if(intersects[0]){
drawMesh.underFloor = k;
drawStartPoint = intersects[0].point;
state = "Draw";
}
}
}
}
if ( state !== STATE.NONE ) {
@ -833,15 +868,39 @@ THREE.StationManagerControls = function ( object, domElement ) {
}
}
if(scope.controlMode == "Draw"){
let points = [
{x:-10,y:0,z:10},
{x:10,y:0,z:10},
{x:-10,y:0,z:-10},
{x:10,y:0,z:-10}
];
plane.geometry.setFromPoints(points);
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
for(let k in scope.planeMesh){
intersects = raycaster.intersectObject( scope.planeMesh[k] );
if(intersects[0]){
drawEndPoint = intersects[0].point;
let points = [
new THREE.Vector3(drawStartPoint.x,drawStartPoint.y+0.1,drawStartPoint.z),
new THREE.Vector3(drawEndPoint.x,drawStartPoint.y+0.1,drawStartPoint.z),
new THREE.Vector3(drawStartPoint.x,drawStartPoint.y+0.1,drawEndPoint.z),
new THREE.Vector3(drawEndPoint.x,drawStartPoint.y+0.1,drawEndPoint.z)
];
for(let i=0;i<drawMesh.geometry.vertices.length;i++){
drawMesh.geometry.vertices[i].set(points[i].x,points[i].y,points[i].z);
}
// drawMesh.geometry.vertices = points;
drawMesh.geometry.verticesNeedUpdate = true;
}
}
// let points = [
// {x:-10,y:0,z:10},
// {x:10,y:0,z:10},
// {x:-10,y:0,z:-10},
// {x:10,y:0,z:-10}
// ];
// plane.geometry.setFromPoints(points);
}
}
@ -854,7 +913,10 @@ THREE.StationManagerControls = function ( object, domElement ) {
}
if(scope.controlMode == "Draw"){
scope.drawSwitch = false;
drawMesh = null;
drawStartPoint = null;
drawEndPoint = null;
}
handleMouseUp( event );

139
src/jlmap3d/jl3dstationmanager/jl3dstationmanager.js
View File

@ -1,26 +1,26 @@
import { Staticmodel } from '@/jlmap3d/jl3dtrafficplan/loader/stationconfig.js';
import { Staticmodel } from '@/jlmap3d/jl3dstationmanager/loader/stationconfig.js';
//静态资源文件路劲
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
//loader
import { FBXLoader } from '@/jlmap3d/main/loaders/FBXLoader';
//轨道视角控制
import { StationManagerControls } from '@/jlmap3d/jl3dstationmanager/controls/stationManagerControls';
//区域控制
import { TransformControls } from '@/jlmap3d/jl3dstationmanager/controls/TransformControls';
//模型管理器
import { ModelManager } from '@/jlmap3d/jl3dtrafficplan/loader/loader.js';
import { ModelManager } from '@/jlmap3d/jl3dstationmanager/loader/loader.js';
//骨骼动画模型辅助工具
import { SkeletonUtils } from '@/jlmap3d/main/utils/SkeletonUtils.js';
//获取信息接口
import { getPublishMapVersion, getPublishMapDetail,getPublish3dMapDetail} from '@/api/jlmap3d/load3ddata';
//cctv站台对象
import { PasserStation } from '@/jlmap3d/jl3dtrafficplan/model/passerstation.js';
import { PasserStation } from '@/jlmap3d/jl3dstationmanager/model/passerstation.js';
//cctv检票机对象
import { PasserCheckDoor } from '@/jlmap3d/jl3dtrafficplan/model/passercheckdoor.js';
//cctv列车对象
import { PasserTrain } from '@/jlmap3d/jl3dtrafficplan/model/passertrain.js';
//cctv行人对象
import { PasserHuman } from '@/jlmap3d/jl3dtrafficplan/model/passerhuman.js';
//cctv渲染器
import { PasserRender } from '@/jlmap3d/jl3dpassflow/passerrender/passerrender.js';
//cctv行人ai
import { PasserAi } from '@/jlmap3d/jl3dtrafficplan/passerai/passerai.js';
//行人寻路相关工具
@ -82,29 +82,35 @@ export function Jl3dStationManager(dom,skinCode,routegroup,viewMap,initCode) {
let waitForCreatOutTop = [];
let waitForCreatOutDown = [];
//定义相机
camerass = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.01, 10000);
camerass.position.set(0, 100, 0);
camerass = new THREE.PerspectiveCamera(70, dom.offsetWidth / dom.offsetHeight, 0.1, 10000);
camerass.position.set(0,300,0);
camerass.aspect = dom.offsetWidth / dom.offsetHeight;
camerass.updateProjectionMatrix();
//定义场景(渲染容器)
scene = new THREE.Scene();
// scene.background = new THREE.Color(0xa0a0a0);
scene.background = new THREE.Color(0xa0a0a0);
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
// var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
// mesh.rotation.x = - Math.PI / 2;
// mesh.receiveShadow = true;
// scene.add( mesh );
// var grid = new THREE.GridHelper( 1000, 100, 0x000000, 0x000000 );
// grid.material.opacity = 0.2;
// grid.material.transparent = true;
// scene.add( grid );
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(scope.dom.offsetWidth,scope.dom.offsetHeight);
renderer.sortObjects = true;
dom.appendChild(renderer.domElement);
var grid = new THREE.GridHelper( 1000, 100, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
let passerRender = new PasserRender(viewMap);
passerRender.initView(dom,scene,camerass);
//定义全局光
let ambientLight = new THREE.AmbientLight(0xffffff, 1.3);
@ -113,14 +119,36 @@ export function Jl3dStationManager(dom,skinCode,routegroup,viewMap,initCode) {
light.position.set( 0, 4000, 0 );
scene.add( light );
let controls = new THREE.StationManagerControls(camerass, dom);
controls.maxPolarAngle = Math.PI / 2;
controls.minPolarangle = Math.PI / 5;
controls.maxDistance = 800;
let controls = new THREE.StationManagerControls(camerass, dom,camerass,scene);
// controls.maxPolarAngle = Math.PI / 2;
// controls.minPolarangle = Math.PI / 5;
// controls.maxDistance = 800;
controls.screenSpacePanning = true;
controls.target.set( 1, 0, 0 );
controls.controlMode = "Orbit";
controls.update();
this.selectmodel = null;
var meshtest = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 200 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
meshtest.rotation.x = - Math.PI / 2;
meshtest.receiveShadow = true;
scene.add( meshtest );
let transformControl = new THREE.TransformControls( camerass, renderer.domElement );
transformControl.addEventListener( 'change', render );
transformControl.addEventListener( 'dragging-changed', function ( event ) {
controls.enabled = ! event.value;
} );
scene.add(transformControl);
// let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
@ -398,26 +426,81 @@ export function Jl3dStationManager(dom,skinCode,routegroup,viewMap,initCode) {
// }
// }
this.changeDrawType = function(drawType){
console.log(drawType);
controls.drawSwitch = true;
if(drawType == "stationRegion"){
controls.drawColor = 0x2894FF;
}
if(drawType == "securityRegion"){
controls.drawColor = 0xFF0000;
}
if(drawType == "checkRegion"){
controls.drawColor = 0x9F35FF;
}
if(drawType == "standRegion"){
controls.drawColor = 0x00EC00;
}
if(drawType == "ticketRegion"){
controls.drawColor = 0x00FFFF;
}
if(drawType == "elevatorRegion"){
controls.drawColor = 0xFFFF37;
}
if(drawType == "stairsRegion"){
controls.drawColor = 0xFF5809;
}
if(drawType == "escalatorRegion"){
controls.drawColor = 0x5CADAD;
}
if(drawType == "unaccessRegion"){
controls.drawColor = 0x272727;
}
}
let oldCameraPosition = new THREE.Vector3();
let oldCameraTarget = new THREE.Vector3();
this.changeControlMode = function(controlMode){
console.log(passerStation);
transformControl.attach(passerStation.topfloor);
if(controlMode == false){
controls.controlMode = "Orbit";
camerass.position.set(oldCameraPosition.x,oldCameraPosition.y,oldCameraPosition.z);
controls.target.set( oldCameraTarget.x,oldCameraTarget.y,oldCameraTarget.z);
passerStation.resetPosition(controls.drawGroup);
}else if(controlMode == true){
controls.controlMode = "Draw";
oldCameraPosition.copy(camerass.position);
oldCameraTarget.copy(controls.target);
// camerass.position.set(0,300,0);
// controls.target.set( 1, 0, 0 );
passerStation.apartPosition(controls.drawGroup);
controls.initPlaneMesh(passerStation);
}
}
//循环渲染函数
function animate() {
passerRender.update();
render();
// console.log(passerRender);
// console.log("ss");
// if(passerRender.state == "freeview"){
controls.update();
controls.update();
// }
// delta = clock.getDelta();
requestAnimationFrame(animate);
}
function render() {
renderer.render( scene,camerass);
window.onresize = function () {
passerRender.reSize(scope.dom.offsetWidth,scope.dom.offsetHeight);
}
this.switchviews = function(viewmode){
passerRender.changeRenderMode(viewmode);
window.onresize = function () {
renderer.setSize(scope.dom.offsetWidth,scope.dom.offsetHeight);
}

3
src/jlmap3d/jl3dstationmanager/loader/loader.js
View File

@ -130,7 +130,8 @@ function fbxpromise(asset,mixers,model){
if( mode == "2"){
loader.load( asset.url, function ( object ) {
model.mesh = object;
console.log(asset.type);
console.log(object);
resolve(asset.deviceType);
} );

4
src/jlmap3d/jl3dstationmanager/loader/stationconfig.js
View File

@ -17,7 +17,9 @@ var Staticmodel = [
name: "车站",
deviceType: "cctvStation",
type: "cctvStation",
url: BASE_ASSET_API + "/MODEL/2021-01-27/323-88925.FBX"///MODEL/2020-11-23/79-95086.FBX
url: BASE_ASSET_API + "/MODEL/2021-02-20/1296-89217.FBX"
//未分拆上下层模型 /MODEL/2021-01-27/323-88925.FBX
//最早模型 /MODEL/2020-11-23/79-95086.FBX
},{
id: "4",
name: "闸机",

225
src/jlmap3d/jl3dstationmanager/model/passerstation.js Normal file
View File

@ -0,0 +1,225 @@
import {Materialload} from '@/jlmap3d/main/loaders/Materialload.js';
export function PasserStation() {
var scope = this;
this.stationMesh = null;
this.stationleft = [];
this.stationright = [];
//替换材质组(站台的)
this.stationtexture = [];
this.stationlist = [];
this.nowStation = null;
this.top = null;
this.down = null;
let originTopPosition = new THREE.Vector3();
let originDownPosition = new THREE.Vector3();
this.topfloor = null;
this.downfloor = null;
for(let i=0;i<22;i++){
let sl = {
id:"left"+i,
status:0,
waiting:0
}
scope.stationleft.push(sl);
}
for(let i=0;i<22;i++){
let sr = {
id:"right"+i,
status:0,
waiting:0
}
scope.stationright.push(sr);
}
//初始化车站模型动画
this.initStationAnimation = function( object,mixers ,deviceaction ,scene){
let mixer = new THREE.AnimationMixer( object ,mixers ,deviceaction ,scene);
let newclip = object.animations[ 0 ];
for(let j=0;j<object.children.length;j++){
if(object.children[j].name == "top"){
// let geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
// let material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
// let cube = new THREE.Mesh( geometry, material );
// cube.position.copy(object.children[j].position);
// scene.add( cube );
object.children[j].animations = [];
object.children[j].animations.push(newclip.clone());
let mixer = new THREE.AnimationMixer( object.children[j] );
let action =mixer.clipAction( object.children[j].animations[0])
action.setLoop(THREE.LoopOnce);
action.clampWhenFinished = true;
// action.play();
mixers.push(mixer);
let device = {
action:action,
mixer:mixer,
};
deviceaction[object.children[j].name] = device;
}
if(object.children[j].name == "down"){
object.children[j].animations = [];
object.children[j].animations.push(newclip.clone());
let mixer = new THREE.AnimationMixer( object.children[j] );
let action =mixer.clipAction( object.children[j].animations[0])
// action.play();
action.setLoop(THREE.LoopOnce);
action.clampWhenFinished = true;
mixers.push(mixer);
let device = {
action:action,
mixer:mixer,
};
deviceaction[object.children[j].name] = device;
}
}
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.renderOrder = 9;
}
} );
scope.stationMesh = object;
scope.top = object.getObjectByName("1");
scope.down = object.getObjectByName("2");
originTopPosition.copy(scope.top.position);
originDownPosition.copy(scope.down.position);
scope.topfloor = object.getObjectByName("1floor");
scope.downfloor = object.getObjectByName("2floor");
// console.log(deviceaction);
scene.add(object);
}
//初始化车站名称数据
this.initStationList = function(stationdata,standdata,psddata){
let list = [];
if(psddata){
for(let i=0,leni = standdata.length;i<leni;i++){
for(let j=0,lenj = psddata.length;j<lenj;j++){
if(standdata[i].code == psddata[j].standCode){
standdata[i].name = psddata[j].code;
}
}
}
for(let i=0,leni = stationdata.length;i<leni;i++){
if(stationdata[i].depot == false){
list[stationdata[i].name] = [];
for(let j=0,lenj = standdata.length;j<lenj;j++){
if(standdata[j].stationCode == stationdata[i].code){
list[stationdata[i].name].push(standdata[j]);
}
}
}
}
for(let k in list){
if(list[k].length>0){
let stationobject = {
code : list[k][0].stationCode,
name : k,
toppsd:null,
downpsd:null,
topsection:null,
downsection:null,
};
if(list[k][0].position.y<list[k][1].position.y){
stationobject.toppsd = list[k][0].name;
stationobject.downpsd = list[k][1].name;
stationobject.topsection = list[k][0].standTrackCode;
stationobject.downsection = list[k][1].standTrackCode;
}else{
stationobject.toppsd = list[k][1].name;
stationobject.downpsd = list[k][0].name;
stationobject.topsection = list[k][1].standTrackCode;
stationobject.downsection = list[k][0].standTrackCode;
}
scope.stationlist.push(stationobject);
}
}
scope.nowStation = scope.stationlist[0];
if(scope.stationtexture["stationlist"]){
scope.stationMesh.getObjectByName("zhantailiebiao").material.map =scope.stationtexture["stationlist"];
scope.stationMesh.getObjectByName("zhantailiebiao").material.map.needsUpdate = true;
if(scope.stationMesh.getObjectByName("menkuangyanse")){
scope.stationMesh.getObjectByName("menkuangyanse").material.map =scope.stationtexture["pingbimen"];
scope.stationMesh.getObjectByName("menkuangyanse").material.map.needsUpdate = true;
}
scope.stationMesh.getObjectByName("zhantaiming").material.map = scope.stationtexture[scope.nowStation.code];
scope.stationMesh.getObjectByName("zhantaiming").material.map.needsUpdate = true;
}
updatestationlist(scope.stationlist);
}else{
olddataai = true;
}
}
//加载线路车站名贴图
this.loadMaterial = function(netdata3d){
Materialload(scope,JSON.parse(netdata3d.data.assets).stationTextureList[0]);
}
this.apartPosition = function(drawGroup){
// scope.down.position.y = scope.top.position.y;
scope.top.position.z += 75;
scope.down.position.z -= 75;
if(drawGroup.children.length>0){
for(let i=0;i<drawGroup.children.length;i++){
// drawGroup.children[i].position.y = scope.top.position.y;
if(drawGroup.children[i].underFloor == "1floor"){
drawGroup.children[i].position.z += 75;
}
if(drawGroup.children[i].underFloor == "2floor"){
drawGroup.children[i].position.z -= 75;
}
}
}
}
this.resetPosition = function(drawGroup){
scope.top.position.copy(originTopPosition);
scope.down.position.copy(originDownPosition);
if(drawGroup.children.length>0){
for(let i=0;i<drawGroup.children.length;i++){
if(drawGroup.children[i].underFloor == "1floor"){
drawGroup.children[i].position.z -= 75;
// drawGroup.children[i].position.y = scope.top.position.y;
}
if(drawGroup.children[i].underFloor == "2floor"){
drawGroup.children[i].position.z += 75;
// drawGroup.children[i].position.y = scope.down.position.y;
}
}
}
}
//更换场景车站
this.changestation = function(stationname){
for(let i=0,leni=scope.stationlist.length;i<leni;i++){
if(scope.stationlist[i].name == stationname){
scope.nowStation = scope.stationlist[i];
if(scope.stationtexture["stationlist"]){
scope.stationMesh.getObjectByName("zhantaiming").material.map = scope.stationtexture[scope.nowStation.code];
scope.stationMesh.getObjectByName("zhantaiming").material.map.needsUpdate = true;
}
i=leni;
}
}
}
}

4
src/utils/baseUrl.js
View File

@ -2,9 +2,9 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://api.joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.8.107:9000'; // 袁琪
BASE_API = 'http://192.168.8.129:9000'; // 旭强
// BASE_API = 'http://192.168.8.129:9000'; // 旭强
// BASE_API = 'http://192.168.8.119:9000'; // 张赛
// BASE_API = 'http://192.168.8.140:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip';

172
src/views/jlmap3d/stationmanager/component/drawtype.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<el-tabs class="mapControl" :tab-position="tabPosition" v-model="activeName" type="card" @tab-click="handleClick" >
<el-tab-pane label="基础区域绘制" name="trackedit" >
<el-row>
<el-button id="stationRegion" class="editbutton stationRegion" @click="actionClick($event)">入口区域</el-button>
</el-row>
<el-row>
<el-button id="securityRegion" class="editbutton securityRegion" @click="actionClick($event)">安检区域</el-button>
</el-row>
<el-row>
<el-button id="checkRegion" class="editbutton checkRegion" @click="actionClick($event)">闸机区域</el-button>
</el-row>
<el-row>
<el-button id="standRegion" class="editbutton standRegion" @click="actionClick($event)">站台区域</el-button>
</el-row>
</el-tab-pane>
<el-tab-pane label="功能区域绘制" name="switchedit">
<el-row>
<el-button id="ticketRegion" class="editbutton ticketRegion" @click="actionClick($event)">售票区域</el-button>
</el-row>
<el-row>
<el-button id="elevatorRegion" class="editbutton elevatorRegion" @click="actionClick($event)">电梯区域</el-button>
</el-row>
<el-row>
<el-button id="stairsRegion" class="editbutton stairsRegion" @click="actionClick($event)">楼梯区域</el-button>
</el-row>
<el-row>
<el-button id="escalatorRegion" class="editbutton escalatorRegion" @click="actionClick($event)">扶梯区域</el-button>
</el-row>
<el-row>
<el-button id="unaccessRegion" class="editbutton unaccessRegion" @click="actionClick($event)">禁行区域</el-button>
</el-row>
</el-tab-pane>
</el-tabs>
<!-- <div class="mapControl">
</div> -->
</template>
<script>
export default {
name: 'DrawType',
components: {
},
data() {
return {
activeName: '',
tabPosition:'left',
size:'medium',
isActive:-1,
}
},
beforeDestroy() {
},
mounted() {
},
methods: {
init: function() {
},
back() {
},
handleClick(tab, event) {
// console.log(tab);
// if(tab.name == "pathedit"){
// this.$emit('saction',this.activeName);
// }
this.isActive = -1;
if(tab.name == "trackedit"){
}
if(tab.name == "switchedit"){
}
if(tab.name == "signaledit"){
}
if(tab.name == "stationedit"){
}
},
actionClick(element){
let actionId = element.currentTarget.id;
// console.log(element.currentTarget.id);
this.$emit('changeDrawType',actionId);
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.mapControl {
position:absolute;
float: left;
left:0;
width: 18%;
height:70%;
background:#fff;
overflow-y:auto;
z-index: 10;
border-radius:0 30px 30px 0;
border:1px solid #000;
// border-radius:5px;
// text-align: center;
}
.editmodelconfig{
left:0;
margin-top:5px;
width:98%;
border-radius:5px;
border:solid 2px #000
}
.active{
background-color:blue;
}
.editbutton{
padding: 1cm
}
.stationRegion{
background:#2894FF;
}
.securityRegion{
background:#FF0000;
}
.checkRegion{
background:#9F35FF;
}
.standRegion{
background:#00EC00;
}
.ticketRegion{
background:#00FFFF;
}
.elevatorRegion{
background:#FFFF37;
}
.stairsRegion{
background:#FF5809;
}
.escalatorRegion{
background:#5CADAD;
}
.unaccessRegion{
background:#272727;
}
</style>

74
src/views/jlmap3d/stationmanager/component/manager.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="jl3dstationmanager">
<div id="jl3d" class="jl3dstationmanagerdraw">
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
import { Jl3dStationManager } from '@/jlmap3d/jl3dstationmanager/jl3dstationmanager.js';
export default {
name: 'ActionManager',
components: {
},
data() {
return {
localStatic:JL3D_LOCAL_STATIC,
jl3d: null,
}
},
watch: {
},
computed: {
},
mounted() {
this.initnewdata();
},
beforeDestroy() {
},
methods: {
initnewdata: function (group,header){
let dom = document.getElementById('jl3d');
this.jl3d = new Jl3dStationManager(dom);
},
}
}
</script>
<style scoped>
.jl3dstationmanager{
width: 100%;
height: 100%;
}
.jl3dstationmanagerdraw {
position: absolute;
float: right;
/* top:25%; */
/* left: 0; */
width: 100%;
height: 100%;
z-index: 9;
}
#canvastexture {
position: absolute;
float: left;
left: 0;
z-index: -12;
}
</style>

115
src/views/jlmap3d/stationmanager/component/property.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<el-tabs class="mapControl" :tab-position="tabPosition" v-model="activeName" type="card" @tab-click="handleClick" >
<el-tab-pane label="区域属性" name="trackedit" >
</el-tab-pane>
<el-tab-pane label="仿真配置" name="switchedit">
</el-tab-pane>
</el-tabs>
<!-- <div class="mapControl">
</div> -->
</template>
<script>
export default {
name: 'ProPerty',
components: {
},
data() {
return {
activeName: '',
tabPosition:'top',
size:'medium',
isActive:-1,
}
},
beforeDestroy() {
},
mounted() {
},
methods: {
init: function() {
},
back() {
},
handleClick(tab, event) {
// console.log(tab);
// if(tab.name == "pathedit"){
// this.$emit('saction',this.activeName);
// }
this.isActive = -1;
if(tab.name == "trackedit"){
}
if(tab.name == "switchedit"){
}
if(tab.name == "signaledit"){
}
if(tab.name == "stationedit"){
}
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.mapControl {
position:absolute;
float: right;
right:0;
width: 18%;
height:70%;
background:#fff;
overflow-y:auto;
z-index: 10;
border-radius:30px 0 0 30px;
border:1px solid #000;
// border-radius:5px;
// text-align: center;
}
.editmodelconfig{
left:0;
margin-top:5px;
width:98%;
border-radius:5px;
border:solid 2px #000
}
.active{
background-color:blue;
}
.editbutton{
padding: 1cm
}
</style>

57
src/views/jlmap3d/stationmanager/jl3dstationmanager.vue
View File

@ -1,6 +1,23 @@
<template>
<div class="jl3dstationmanager">
<div id="jl3d" class="jl3ddraw">
<el-row class="managerbutton">
<el-button @click="switchViews" round>{{switchButtonName}}</el-button>
<!-- 仿真操作按钮 -->
<el-button round >显示隐藏区域</el-button>
<el-button round >显示隐藏热力图</el-button>
<!-- 绘图操作按钮 -->
<el-button round >删除区域</el-button>
<el-button round >移动操作</el-button>
<el-button round>旋转操作</el-button>
<el-button round>拉伸操作</el-button>
<el-button round>保存方案</el-button>
<el-button round>加载方案</el-button>
<!-- 其他 -->
<el-button round>退出</el-button>
</el-row>
<Draw-Type @changeDrawType=changeDrawType ></Draw-Type>
<Pro-Perty></Pro-Perty>
<div id="jl3d" class="jl3dstationmanagerdraw">
</div>
</div>
</template>
@ -10,14 +27,20 @@
import { Jl3dStationManager } from '@/jlmap3d/jl3dstationmanager/jl3dstationmanager.js';
import DrawType from '@/views/jlmap3d/stationmanager/component/drawtype';
import ProPerty from '@/views/jlmap3d/stationmanager/component/property';
export default {
name: 'jl3devacuation',
components: {
DrawType,
ProPerty,
},
data() {
return {
localStatic:JL3D_LOCAL_STATIC,
jl3d: null,
switchButtonName:'仿真视角',
viewStatus:false,
}
},
watch: {
@ -39,13 +62,34 @@
let dom = document.getElementById('jl3d');
this.jl3d = new Jl3dStationManager(dom);
},
changeDrawType(drawTypeName){
// console.log(drawTypeName);
this.jl3d.changeDrawType(drawTypeName);
},
switchViews(){
if(this.viewStatus == false){
this.switchButtonName = '绘制视角',
this.viewStatus = true;
this.jl3d.changeControlMode(true);
}else if(this.viewStatus == true){
this.switchButtonName = '仿真视角 ',
this.viewStatus = false;
this.jl3d.changeControlMode(false);
}
},
}
}
</script>
<style scoped>
.jl3ddraw {
.jl3dstationmanager{
width: 100%;
height: 100%;
}
.jl3dstationmanagerdraw {
position: absolute;
float: right;
/* top:25%; */
@ -54,9 +98,12 @@
height: 100%;
z-index: 9;
}
.jl3dstationmanager{
width: 100%;
height: 100%;
.managerbutton{
width:50%;
left:25%;
text-align: center;
position: absolute;
z-index: 10;
}
#canvastexture {
position: absolute;