From 0a6e149ec5684f243bdadb0b8ef780cb71000ace Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期三, 06 四月 2022 15:48:35 +0800
Subject: [PATCH] #
---
static/js/app.js | 476 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 292 insertions(+), 184 deletions(-)
diff --git a/static/js/app.js b/static/js/app.js
index 9911ce3..d3c5c04 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,9 +1,18 @@
import {OrbitControls} from './lib/OrbitControls.js';
+import { PointerLockControls } from './lib/PointerLockControls.js';
import Stats from './lib/stats.module.js';
+import { EffectComposer } from './lib/EffectComposer.js';
+import { RenderPass } from './lib/postprocessing/RenderPass.js';
+import { ShaderPass } from './lib/postprocessing/ShaderPass.js';
+import { OutlinePass } from './lib/postprocessing/OutlinePass.js';
+import { FXAAShader } from './lib/postprocessing/FXAAShader.js';
import {MTLLoader} from './lib/MTLLoader.js';
import {OBJLoader} from './lib/OBJLoader.js';
import {StoreShelf} from './object/StoreShelf.js';
import {StoreCrn} from './object/StoreCrn.js';
+import {StoreConvey} from './object/StoreConvey.js';
+import {StoreGoods} from './object/StoreGoods.js';
+import {StaTask} from './object/StaTask.js';
var APP = {
@@ -15,11 +24,20 @@
this.objects = [];//鍦烘櫙涓墍鏈夊璞＄殑闆嗗悎
this.firstTime = 1;
this.stats = null;
+ this.outlinePass = null;
this.goodTypes=[];//瀛樺偍鎵�鏈夌殑搴撲綅绫诲瀷
- this.wrkTasks = [];// 浠诲姟鍒楄〃
this.crnTasks = [];// 鍫嗗灈鏈哄垪琛�
- this.time = 0;//鏍囪鍫嗗灈鏈鸿繍琛岀殑鏃堕棿
- this.progress = 0;
+ this.staTasks = [];// 杈撻�佺嚎鍒楄〃
+ this.moveForward = false;//鏄惁鍚戝墠杩愯
+ this.moveBackward = false;//鏄惁鍚戝悗杩愯
+ this.moveLeft = false;//鏄惁鍚戝乏杩愯
+ this.moveRight = false;//鏄惁鍚戝彸杩愯
+ this.canJump = false;//鏄惁鍙互璺�
+ this.velocity = new THREE.Vector3();
+ this.direction = new THREE.Vector3();
+ this.raycaster = null;
+ this.prevTime = performance.now();//涓婁竴娆ender鐨勬椂闂�
+ this.backgroundType = true;
this.start = function () {
this.initMain();
@@ -33,105 +51,75 @@
this.initBackground();
this.initStats();
this.initLight();
+ this.initReSize(this);
+ this.initOutLine();
+ // this.initComposer();
+ this.initObjectSelect();
+ this.initPointLockControl(this);
this.initFloor();
- this.initModel();
- this.initStoreObjects(this);
+ this.initBuilding();
+ this.initConvey();
}
this.animate = function () {
requestAnimationFrame(this.animate.bind(this));
this.stats.begin();
- this.renderer.render(this.scene, this.camera);
+ if (this.composer) {
+ this.composer.render();
+ } else {
+ this.renderer.render(this.scene, this.camera);
+ }
+ this.firstPersonMove();
+ this.initStoreObjects(this);
this.stats.end();
this.queryCrn();
this.crnMove();
+ this.querySta();
+ this.staChange();
}
this.initScene = function () {
this.scene = new THREE.Scene();
}
this.initCamera = function () {
- //澹版槑涓�涓�忚鐩告満锛�
- // 瑙嗚锛�60锛�
- // 绾垫í姣攁spect:鍏ㄥ睆锛屼娇鐢ㄧ殑鏄祻瑙堝櫒鐨勫搴�/楂樺害
- //杩戝钩闈ear锛�0.1
- //杩滃钩闈㈣瑙抐ar:10000
- this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 50000);
- /*
- 璁剧疆鐩告満浣嶇疆锛屾敞鎰弔hreejs涓殑鍧愭爣绯婚噰鐢ㄧ殑鏄彸鎵嬪潗鏍囩郴
- */
- // this.camera.position.x = 0;
- // this.camera.position.y = 1000;
- // this.camera.position.z = 600;
- // //鐩告満鐨勬湞鍚�
- // this.camera.lookAt(0, 0, 0);
- this.camera.position.set( - 350, 1070, 1550 );
- this.camera.lookAt( this.scene.position );
- //灏嗙浉鏈烘斁鍒板満鏅腑
- this.scene.add(this.camera);
+ if (this.camera === null) {
+ this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 50000);
+ this.camera.position.set( -350, 600, 1100 );
+ this.camera.lookAt( this.scene.position );
+ //灏嗙浉鏈烘斁鍒板満鏅腑
+ this.scene.add(this.camera);
+ } else {
+ this.camera.position.set( -350, 600, 1100 );
+ this.camera.lookAt( this.scene.position );
+ }
}
this.initRenderer = function () {
- this.renderer = new THREE.WebGLRenderer();
- // this.renderer.physicallyCorrectLights = true;
- // this.renderer.outputEncoding = THREE.sRGBEncoding;
- // this.renderer.shadowMap.enabled = true;
- // this.renderer.toneMapping = THREE.ReinhardToneMapping;
+ this.renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ logarithmicDepthBuffer: true
+ });
+ // this.renderer.toneMapping = THREE.CineonToneMapping; // 鑹茶皟
+ this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio( window.devicePixelRatio );
- this.renderer.setSize( window.innerWidth, window.innerHeight );
+ this.renderer.shadowMap.enabled = true;
+ this.renderer.shadowMap.type = THREE.BasicShadowMap;
this.dom = document.getElementById("container");
- this.dom.appendChild( this.renderer.domElement );
+ this.dom.appendChild(this.renderer.domElement);
+
}
this.initLight = function () {
-
//棣栧厛娣诲姞涓幆澧冨厜
let ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,褰卞搷鏁翠釜鍦烘櫙鐨勫厜婧�
ambient.position.set(0, 0, 0);
this.addObject(ambient);
- //娣诲姞骞宠鍏�,骞宠鍏夌被浼间簬澶槼鍏�
- let directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);//妯℃嫙杩滃绫讳技澶槼鐨勫厜婧�
- directionalLight.position.set(0, 200, 0);
- this.addObject(directionalLight);
- //璁剧疆鐐瑰厜婧�
- let pointLight1 = new THREE.PointLight(0xffffff, 0.3);
- pointLight1.position.set(-500, 200, 0);
- this.addObject(pointLight1);
- let pointLight2 = new THREE.PointLight(0xffffff, 0.3);
- pointLight2.position.set(500, 200, 0);
- this.addObject(pointLight2);
- // ---
- // var bulbLight = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight.position.set( 600, 600, 500 );
- // bulbLight.castShadow = true;
- // bulbLight.power = 100;
- // this.addObject(bulbLight);
- // ---
- // var bulbLight1 = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight1.position.set( -600, 600, 500 );
- // bulbLight1.castShadow = true;
- // bulbLight1.power = 100;
- // this.addObject(bulbLight1);
- // // ---
- // var bulbLight2 = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight2.position.set( 600, 600, -500 );
- // bulbLight2.castShadow = true;
- // bulbLight2.power = 100;
- // this.addObject(bulbLight2);
- // // ---
- // var bulbLight3 = new THREE.PointLight( 0xffee88, 1, 2000, 2 );
- // bulbLight3.position.set( -600, 600, -500 );
- // bulbLight3.castShadow = true;
- // bulbLight3.power = 100;
- // this.addObject(bulbLight3);
- // // ---
- // var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
- // hemiLight.intensity = 0.0001;
- // this.addObject(hemiLight);
-
- // const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
- // this.addObject( ambientLight );
- //
- // const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
- // directionalLight.position.set( - 1, 1, 1 );
- // this.addObject( directionalLight );
+ // 闃村奖鑱氬厜鐏�
+ let pointLight = new THREE.SpotLight(0xFFFAFA,1);
+ pointLight.position.set(0, 1500, 2500);
+ pointLight.castShadow = true;
+ pointLight.shadow.camera.near = 2000;
+ pointLight.shadow.camera.far = 10000;
+ pointLight.shadow.mapSize.height = 200000;
+ pointLight.shadow.mapSize.width = 200000;
+ this.addObject(pointLight);
}
this.initOrbitControl = function () {
this.orbitControl = new OrbitControls(this.camera, this.renderer.domElement);
@@ -146,17 +134,149 @@
}
this.initStats = function () {
this.stats = new Stats();
- // this.dom.appendChild( this.stats.dom );
+ this.dom.appendChild( this.stats.dom );
+ this.stats.domElement.style.display = 'none';
}
this.initBackground = function () {
- const cubeTextureLoader = new THREE.CubeTextureLoader();
- cubeTextureLoader.setPath( '../static/img/background/' );
- this.scene.background = cubeTextureLoader.load([
- "posx.jpg", "negx.jpg",
- "posy.jpg", "negy.jpg",
- "posz.jpg", "negz.jpg"
- ]);
- this.scene.background = new THREE.Color( 0xf0f0f0 );
+ if (this.backgroundType) {
+ // this.scene.background = new THREE.Color( 0xf0f0f0 );
+ this.scene.background = new THREE.Color( 0x333333 );
+ } else {
+ const cubeTextureLoader = new THREE.CubeTextureLoader();
+ cubeTextureLoader.setPath( '../static/img/skybox0/' );
+ this.scene.background = cubeTextureLoader.load([
+ "px.jpg", "nx.jpg",
+ "py.jpg", "ny.jpg",
+ "pz.jpg", "nz.jpg"
+ ]);
+ }
+ }
+ this.initReSize = function(object){
+ window.addEventListener('resize', function () {
+ object.camera.aspect = window.innerWidth / window.innerHeight;
+ object.camera.updateProjectionMatrix();
+ object.renderer.setSize(window.innerWidth, window.innerHeight);
+ }, false);
+ }
+ this.initOutLine = function(){
+ this.outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.scene, this.camera )
+ // this.outlinePass.edgeStrength = 1;//鍖呭洿绾挎祿搴�
+ // this.outlinePass.edgeGlow = 0.1;//杈圭紭绾胯寖鍥�
+ // this.outlinePass.edgeThickness = 1;//杈圭紭绾挎祿搴�
+ // this.outlinePass.pulsePeriod = 2;//鍖呭洿绾块棯鐑佽瘎鐜�
+ // this.outlinePass.visibleEdgeColor.set('#B31985');//鍖呭洿绾块鑹�
+ // this.outlinePass.hiddenEdgeColor.set('#190a05');//琚伄鎸＄殑杈圭晫绾块鑹�
+ }
+ this.initComposer = function(){
+ this.composer = new EffectComposer(this.renderer);
+ const renderPass = new RenderPass( this.scene, this.camera );
+ this.composer.addPass( renderPass );
+ this.composer.addPass(this.outlinePass);
+
+ const pixelRatio = this.renderer.getPixelRatio();
+ this.fxaaPass = new ShaderPass( FXAAShader );
+ this.fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( this.dom.offsetWidth * pixelRatio );
+ this.fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( this.dom.offsetHeight * pixelRatio );
+ this.composer.addPass( this.fxaaPass );
+ }
+ this.initObjectSelect = function(){
+ new ObjectSelect(this.scene, this.camera, this.outlinePass);
+ }
+ this.initPointLockControl = function(object){
+ this.controls = new PointerLockControls( this.camera, document.body );
+ this.raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 50 );
+
+ const onKeyDown = function ( event ) {
+ switch ( event.code ) {
+ case 'ArrowUp':
+ case 'KeyW':
+ object.moveForward = true;
+ break;
+ case 'ArrowLeft':
+ case 'KeyA':
+ object.moveLeft = true;
+ break;
+ case 'ArrowDown':
+ case 'KeyS':
+ object.moveBackward = true;
+ break;
+ case 'ArrowRight':
+ case 'KeyD':
+ object.moveRight = true;
+ break;
+ case 'Space':
+ if ( object.canJump === true ) {
+ object.velocity.y += 450;
+ }
+ object.canJump = false;
+ break;
+ }
+ };
+
+ const onKeyUp = function ( event ) {
+ switch ( event.code ) {
+ case 'ArrowUp':
+ case 'KeyW':
+ object.moveForward = false;
+ break;
+ case 'ArrowLeft':
+ case 'KeyA':
+ object.moveLeft = false;
+ break;
+ case 'ArrowDown':
+ case 'KeyS':
+ object.moveBackward = false;
+ break;
+ case 'ArrowRight':
+ case 'KeyD':
+ object.moveRight = false;
+ break;
+ }
+ };
+ this.controls.addEventListener( 'lock', function () {
+ console.log("绗竴浜虹О瑙嗚")
+ } );
+ this.controls.addEventListener( 'unlock', function () {
+ console.log("涓婂笣瑙嗚");
+ object.initCamera();
+ addClass(document.getElementById("ship-info-btn"), "show");
+ document.getElementById("ship-type-ul").style.transform = 'translateY(-40px)';
+ } );
+ document.addEventListener( 'keydown', onKeyDown );
+ document.addEventListener( 'keyup', onKeyUp );
+
+ this.addObject( this.controls.getObject() );
+ }
+ this.firstPersonMove=function(){
+ const time = performance.now();
+ if ( this.controls.isLocked === true ) {
+ this.raycaster.ray.origin.copy( this.controls.getObject().position );
+ this.raycaster.ray.origin.y -= 10;
+ const intersections = this.raycaster.intersectObjects( this.objects, false );
+ const onObject = intersections.length > 0;
+ const delta = ( time - this.prevTime ) / 1000;
+ this.velocity.x -= this.velocity.x * 10.0 * delta;
+ this.velocity.z -= this.velocity.z * 10.0 * delta;
+ this.velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass
+ this.direction.z = Number( this.moveForward ) - Number( this.moveBackward );
+ this.direction.x = Number( this.moveRight ) - Number( this.moveLeft );
+ this.direction.normalize(); // this ensures consistent movements in all directions
+ if ( this.moveForward || this.moveBackward ) this.velocity.z -= this.direction.z * 2000.0 * delta;
+ if ( this.moveLeft || this.moveRight ) this.velocity.x -= this.direction.x * 2000.0 * delta;
+ if ( onObject === true ) {
+ this.velocity.y = Math.max( 0, this.velocity.y );
+ this.canJump = true;
+ }
+ this.controls.moveRight( - this.velocity.x * delta );
+ this.controls.moveForward( - this.velocity.z * delta );
+ this.controls.getObject().position.y += ( this.velocity.y * delta ); // new behavior
+ if ( this.controls.getObject().position.y < 10 ) {
+ this.velocity.y = 0;
+ this.controls.getObject().position.y = 10;
+ this.canJump = true;
+ }
+ }
+ this.prevTime = time;
}
this.removeObject = function (nameorid) {
for (let i = 0; i < this.objects.length; i++) {
@@ -182,135 +302,123 @@
// const helper = new THREE.PolarGridHelper( 2000, 100 );
- const helper = new THREE.GridHelper( 8000, 300 );
- helper.position.y = - 0;
+ const helper = new THREE.GridHelper( 8000, 300);
+ helper.position.x = 1200;
+ helper.position.y = - 1;
+ helper.position.z = -2000;
helper.material.opacity = 0.25;
helper.material.transparent = true;
this.addObject( helper );
// this.addObject(new Floor({position: {}}))
}
+ this.initBuilding = function () {
+ let buildingData = buildingObjects.objects;
+ for (let i = 0; i < buildingData.length; i++) {
+ let objectOption = buildingData[i];
+ switch (objectOption.objectType) {
+ case "cube":
+ let cube = new Cube(objectOption);
+ this.addObject(cube);
+ break;
+ }
+ }
+ }
+ this.initConvey = function () {
+ let storeConvey = new StoreConvey(this, conveyObjects.objects)
+ storeConvey.load();
+ }
this.initStoreObjects = function (object) {
if (this.firstTime === 1) {
- initStore();
- if (Store3DData !== null) {
- for(var group of Store3DData.data.store.groups) {
+ if (Store3DData !== undefined && Store3DData !== null) {
+ for(let group of Store3DData.data.store.groups) {
new StoreCrn(group.crn, object);
- for (var line of group.lines) {
+ for (let line of group.lines) {
let shelf = new StoreShelf(line);
- object.addObject(shelf);
- //鏄剧ず搴撲綅涓婄殑璐х墿
- // for (var bin of line.bins) {
- // let existGoods=this.getExistedGoodType(bin.State);
- // let storeGoods = new StoreGoods(optionGroup, bin);
- // if(existGoods==null) {
- // let goods=storeGoods.create();
- // object.addObject(goods);
- // this.goodTypes.push({type: bin.State, object: goods});
- // } else {
- // let goods= storeGoods.clone(existGoods);
- // object.addObject(goods);
- // }
- // }
-
+ object.addObject(shelf.mesh);
+ if (line.bins !== null) {
+ new StoreGoods(object, line.bins, shelf);
+ }
}
}
+ this.firstTime = 0;
}
}
}
this.queryCrn = function () {
- if (CrnDatas !== null) {
+ if (CrnDatas !== null && this.firstTime === 0) {
for (let crnData of CrnDatas) {
let crnTask = getArrVal(this.crnTasks, "crnNo", crnData.crnNo);
if (null == crnTask) {
this.crnTasks.push(new CrnTask(crnData, this));
} else {
if(!crnTask.run) {
- // console.log(2)
crnTask.modify(crnData);
}
}
}
}
}
- this.getExistedGoodType=function(state){
- for (let i=0;i<this.goodTypes.length;i++) {
- let type=this.goodTypes[i];
- if(type.type===state) {
- return type.object;
- }
- }
- return null;
- }
- this.initModel = function () {
- let that = this;
- const manager = new THREE.LoadingManager();
- // manager.addHandler( /\.dds$/i, new DDSLoader() );
- // new MTLLoader(manager)
- // .setPath( '../static/model/obj/' )
- // .load( '璐у弶.mtl', function ( materials ) {
- // materials.preload();
- // new OBJLoader( manager )
- // .setMaterials( materials )
- // .setPath( '../static/model/obj/' )
- // .load( '璐у弶.obj', function ( object ) {
- // object.position.z = -480;
- // object.position.x = -1735;
- // object.scale.set(0.03, 0.03, 0.03);
- // object.rotateY(- Math.PI / 2)
- // that.addObject( object );
- // }, null, null );
- // });
- // new MTLLoader(manager)
- // .setPath( '../static/model/obj/' )
- // .load( '杞借揣鍙�.mtl', function ( materials ) {
- // materials.preload();
- // new OBJLoader( manager )
- // .setMaterials( materials )
- // .setPath( '../static/model/obj/' )
- // .load( '杞借揣鍙�.obj', function ( object ) {
- // object.position.z = -480;
- // object.position.x = -1735;
- // object.scale.set(0.03, 0.03, 0.03);
- // object.rotateY(- Math.PI / 2)
- // that.addObject( object );
- // }, null, null );
- // });
- // new MTLLoader(manager)
- // .setPath( '../static/model/obj/' )
- // .load( '鍫嗗灈鏈烘湰浣�.mtl', function ( materials ) {
- // materials.preload();
- // new OBJLoader( manager )
- // .setMaterials( materials )
- // .setPath( '../static/model/obj/' )
- // .load( '鍫嗗灈鏈烘湰浣�.obj', function ( object ) {
- // object.position.z = -480;
- // object.position.x = -1735;
- // // object.position.z = 0;
- // // object.position.x = 0;
- // // object.position.y = 0;
- // object.scale.set(0.03, 0.03, 0.03);
- // object.rotateY(- Math.PI / 2)
- // that.addObject( object );
- // }, null, null );
- // });
- }
- this.initModelMove = function () {
- console.log(this.crnTasks)
- // for (var wrkMast of this.wrkTasks) {
- // this.crnBody = getArrVal(this.objects, "name", wrkMast.crnNo + "-body");
- // // 鍙栬揣鐐瑰畾浣�
- // let sourceLocPosition = getBinPosition(wrkMast.sourceLocNo);
- // let points = [new THREE.Vector3(this.crnBody.position.x, this.crnBody.position.y, this.crnBody.position.z), sourceLocPosition];
- // this.curve = new Route(points);
- // }
-
- }
- this.crnMove = function (object) {
+ this.crnMove = function () {
for (let crnTask of this.crnTasks) {
crnTask.move();
}
}
+ this.querySta = function () {
+ if (StaDatas !== null && this.firstTime === 0) {
+ for (let staData of StaDatas) {
+ let staTask = getArrVal(this.staTasks, "no", staData.no);
+ if (null == staTask) {
+ this.staTasks.push(new StaTask(staData, this));
+ } else {
+ if(!staTask.run) {
+ staTask.modify(staData);
+ }
+ }
+ }
+ }
+ }
+ this.staChange = function () {
+ for (let staTask of this.staTasks) {
+ staTask.change();
+ }
+ }
+
+ // 鍔熻兘鏂规硶鍖�
+ this.changeStats = function () {
+ if (this.stats.domElement.style.display === 'none') {
+ this.stats.domElement.style.display = 'block';
+ } else {
+ this.stats.domElement.style.display = 'none';
+ }
+ }
+ this.changeBackGround = function () {
+ this.backgroundType = !this.backgroundType;
+ this.initBackground();
+ }
+ this.lockControl = function () {
+ this.camera.position.y = 100;
+ this.camera.lookAt(900,1100,0);
+ this.controls.getObject().position.x = -200;
+ this.controls.getObject().position.y = 200;
+ this.controls.getObject().position.z = 200;
+ this.controls.lock();
+ }
+ this.mainView = function () {
+ this.camera.position.set( 1400, 400, 2000 );
+ this.camera.lookAt( 1400, 500, 0 );
+ }
+ this.leftView = function () {
+ this.camera.position.set( -3000, 300, -2000 );
+ this.camera.lookAt(0, 500, -2000);
+ }
+ this.verticalView = function () {
+ this.camera.position.set( 1400, 6000, -1800 );
+ this.camera.lookAt( 1400, 0, -1800 );
+ }
+ this.backlView = function () {
+ this.initCamera();
+ }
},
};
--
Gitblit v1.9.1