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

修改三维cctv移动鼠标卡顿，改用主线程渲染人物动画

Browse Source
This commit is contained in:
sunzhenyu 2020-09-22 15:16:53 +08:00
parent b9247b1bb1
commit 89fd0ec052
6 changed files with 133 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/jlmap3d/jl3dpassflow/jl3dpassflownew.js
View File

@ -19,6 +19,8 @@ import { PassflowConnect } from '@/jlmap3d/jl3dpassflow/connect/passflowconnect.
import StompClient from '@/utils/sock';
import store from '@/store/index_APP_TARGET';
// import { Loading } from 'element-ui';
import {Stats} from '@/jlmap3d/main/lib/stats.min.js';
let clock = new THREE.Clock();
let delta;
@ -50,7 +52,7 @@ let zhajiout = [];
let deviceaction = [];
let passerwebwork = new Worker("../../static/workertest/passsimulation/passer.js");
// let passerwebwork = new Worker("../../static/workertest/passsimulation/passer.js");
let stationwebwork = new Worker("../../static/workertest/passsimulation/station.js");
let stationzon = new ZoneManager();
@ -173,6 +175,10 @@ let views2 = [
];
export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
// let stats = new Stats();
// dom.appendChild( stats.dom );
let scope = this;
initView(viewMap);
this.dom = dom;
@ -226,15 +232,15 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xa0a0a0);
let mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add(mesh);
let grid = new THREE.GridHelper(200, 20, 0x000000, 0x000000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
// let mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
// mesh.rotation.x = - Math.PI / 2;
// mesh.receiveShadow = true;
// scene.add(mesh);
//
// let grid = new THREE.GridHelper(200, 20, 0x000000, 0x000000);
// grid.material.opacity = 0.2;
// grid.material.transparent = true;
// scene.add(grid);
//定义全局光
@ -275,7 +281,7 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
let targetPosition = new THREE.Vector3();
let pathfinder = new THREE.Pathfinding();
let mouse = new THREE.Vector2();
// let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
//上车控制开关
@ -331,45 +337,45 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
);
// document.addEventListener( 'mouseup', onDocumentMouseUp, false );
function onDocumentMouseUp (event) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
camerass.updateMatrixWorld();
raycaster.setFromCamera( mouse, camerass );
const intersects = raycaster.intersectObject( navmesh );
if ( !intersects.length ) return;
console.log(intersects[0].point);
targetPosition.copy( intersects[0].point );
// Teleport on ctrl/cmd click or RMB.
if (event.metaKey || event.ctrlKey || event.button === 2) {
path = null;
originhuman1.position.copy( playerPosition.copy( targetPosition ) );
return;
}
path = pathfinder.findPath( playerPosition, targetPosition, ZONE, groupID );
let points = [];
points.push(new THREE.Vector3(originhuman1.position.x,originhuman1.position.y,originhuman1.position.z));
for(let i=0;i<path.length;i++){
points.push(path[i]);
}
originhuman1.curve = new THREE.CatmullRomCurve3(points);
originhuman1.curve.curvrtype = "centripetal";
originhuman1.progress = 0;
console.log(path);
}
// function onDocumentMouseUp (event) {
//
// mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
// mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
//
//
// camerass.updateMatrixWorld();
//
// raycaster.setFromCamera( mouse, camerass );
//
// const intersects = raycaster.intersectObject( navmesh );
//
// if ( !intersects.length ) return;
// console.log(intersects[0].point);
// targetPosition.copy( intersects[0].point );
//
// // Teleport on ctrl/cmd click or RMB.
// if (event.metaKey || event.ctrlKey || event.button === 2) {
//
// path = null;
// originhuman1.position.copy( playerPosition.copy( targetPosition ) );
//
// return;
//
// }
//
// path = pathfinder.findPath( playerPosition, targetPosition, ZONE, groupID );
//
// let points = [];
// points.push(new THREE.Vector3(originhuman1.position.x,originhuman1.position.y,originhuman1.position.z));
// for(let i=0;i<path.length;i++){
// points.push(path[i]);
// }
// originhuman1.curve = new THREE.CatmullRomCurve3(points);
// originhuman1.curve.curvrtype = "centripetal";
// originhuman1.progress = 0;
// console.log(path);
//
// }
function tick ( dt ) {
@ -603,7 +609,7 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
//进站控制
startWorker();
stationwebwork.postMessage("on");
passerwebwork.postMessage("on");
// passerwebwork.postMessage("on");
};
},1000);
@ -767,28 +773,51 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
// // newhumancreate(stationzon.getinitposition("exitgate"),6);
// }
}
function speciTest(){
// stats.update();
if(aiswitch == 0){
moveanimateupdate();
passerai();
delta = clock.getDelta();
// tick(delta);
for(let i=mixers.length-1;i>=0;i--){
if(mixers[i]._actions[0].isRunning()){
mixers[i].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 );
}
}
}
}
function startWorker(){
initpasser();
passerwebwork.onmessage = function (event) {
if(aiswitch == 0){
moveanimateupdate();
passerai();
delta = clock.getDelta();
// tick(delta);
for(let i=mixers.length-1;i>=0;i--){
if(mixers[i]._actions[0].isRunning()){
mixers[i].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 );
}
}
}
};
// passerwebwork.onmessage = function (event) {
//
// stats.update();
// if(aiswitch == 0){
// moveanimateupdate();
// passerai();
//
// delta = clock.getDelta();
// // tick(delta);
//
// for(let i=mixers.length-1;i>=0;i--){
// if(mixers[i]._actions[0].isRunning()){
// mixers[i].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 );
// }
// }
// }
// };
stationwebwork.onmessage = function (event) {
if(aiswitch == 0){
// console.log(humanlist.children.length);
@ -828,13 +857,15 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
// console.log(rendermode);
if(rendermode == 4){
render4view();
}else if(rendermode == 2){
}
if(rendermode == 2){
render2view();
}
speciTest();
// else if(rendermode == 1){
// render4view();
// }
else if(rendermode == 0){
if(rendermode == 0){
renderer.render(scene, camerass);
scope.controls.update();
}
@ -1046,7 +1077,7 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
model.action.play();
model.progress = 0;
model.runrail = curve;
model.speed = 0.2/curve.getLength();
model.speed = 0.1/curve.getLength();
}
function moveanimateupdate(){
@ -1614,59 +1645,58 @@ export function Jl3dpassflow(dom,skinCode,routegroup,viewMap) {
}
let specilView,specilCamera,specilLeft,specilBottom,specilWidth,specilHeight;
function render4view() {
// updateSize();
for ( let ii = 0; ii < 4; ii ++ ) {
for ( let ii = 0; ii < views4.length; ++ ii ) {
let view = views4[ ii ];
let camera = view.camera;
specilView = views4[ ii ];
specilCamera = specilView.camera;
// view.updateCamera( camera, scene, mouseX, mouseY );
let left = Math.floor( windowWidth * view.left );
let bottom = Math.floor( windowHeight * view.bottom );
let width = Math.floor( windowWidth * view.width );
let height = Math.floor( windowHeight * view.height );
specilLeft = Math.floor( windowWidth * specilView.left );
specilBottom = Math.floor( windowHeight * specilView.bottom );
specilWidth = Math.floor( windowWidth * specilView.width );
specilHeight = Math.floor( windowHeight * specilView.height );
renderer.setViewport( left, bottom, width, height );
renderer.setScissor( left, bottom, width, height );
renderer.setViewport( specilLeft,specilBottom,specilWidth,specilHeight );
renderer.setScissor( specilLeft,specilBottom,specilWidth,specilHeight );
renderer.setScissorTest( true );
camera.aspect = width / height;
camera.updateProjectionMatrix();
specilCamera.aspect = specilWidth / specilHeight;
specilCamera.updateProjectionMatrix();
renderer.render( scene, camera );
renderer.render( scene, specilCamera );
}
}
function render2view() {
// updateSize();
for ( let ii = 0; ii < views2.length; ++ ii ) {
for ( let ii = 0; ii < 2; ii ++ ) {
let view = views2[ ii ];
let camera = view.camera;
specilView = views2[ ii ];
specilCamera = specilView.camera;
// view.updateCamera( camera, scene, mouseX, mouseY );
let left = Math.floor( windowWidth * view.left );
let bottom = Math.floor( windowHeight * view.bottom );
let width = Math.floor( windowWidth * view.width );
let height = Math.floor( windowHeight * view.height );
specilLeft = Math.floor( windowWidth * specilView.left );
specilBottom = Math.floor( windowHeight * specilView.bottom );
specilWidth = Math.floor( windowWidth * specilView.width );
specilHeight = Math.floor( windowHeight * specilView.height );
renderer.setViewport( left, bottom, width, height );
renderer.setScissor( left, bottom, width, height );
renderer.setViewport( specilLeft,specilBottom,specilWidth,specilHeight );
renderer.setScissor( specilLeft,specilBottom,specilWidth,specilHeight );
renderer.setScissorTest( true );
camera.aspect = width / height;
camera.updateProjectionMatrix();
specilCamera.aspect = specilWidth / specilHeight;
specilCamera.updateProjectionMatrix();
renderer.render( scene, camera );
renderer.render( scene, specilCamera );
}

0
src/jlmap3d/jl3dpassflow/model/humanmanager.js
View File

0
src/jlmap3d/jl3dpassflow/model/humanmodel.js
View File

1
src/views/jlmap3d/passflow/jl3dpassflow.vue
View File

@ -95,6 +95,7 @@ export default {
watch: {
'$store.state.app.windowSizeCount': function() {
this.videoList.forEach((videoPlay, index)=>{
console.log("??");
document.querySelector('.myvideo' + index + '-dimensions').style.width = window.innerWidth / 4 + 'px';
document.querySelector('.myvideo' + index + '-dimensions').style.height = window.innerHeight / 2 + 'px';
// videoPlay.width_ = window.innerWidth / 4;

2
static/workertest/passsimulation/passer.js
View File

@ -7,7 +7,7 @@ function timedCount(){
if(e.data == "on"){
update = setInterval("passerupdate()", 100);
update = setInterval("passerupdate()", 200);
}
if(e.data == "off"){

2
static/workertest/passsimulation/station.js
View File

@ -6,7 +6,7 @@ function timedCount(){
if(e.data == "on"){
console.log("on");
// console.log("on");
update = setInterval("stationupdate()", 2000);
}