#

luxiaotao1123

2022-04-06 3b3f9d86e4878f676f3237ac6dd46fbfbbe77fd5

 static/js/app.js

@@ -1,7 +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';


var APP = {

@@ -13,9 +24,20 @@
      this.objects = [];//场景中所有对象的集合
      this.firstTime = 1;
      this.stats = null;
      this.outlinePass = null;
      this.goodTypes=[];//存储所有的库位类型
      this.wrkTasks = [];// 任务列表
      this.time = 0;//标记堆垛机运行的时间
      this.crnTasks = [];// 堆垛机列表
      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();//上一次render的时间
      this.backgroundType = true;

      this.start = function () {
         this.initMain();
@@ -29,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.queryTask();
         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.modelMove();
         this.queryCrn();
         this.crnMove();
         this.querySta();
         this.staChange();
      }
      this.initScene = function () {
         this.scene = new THREE.Scene();
      }
      this.initCamera = function () {
         //声明一个透视相机，
         // 视角：60，
         // 纵横比aspect:全屏，使用的是浏览器的宽度/高度
         //近平面near：0.1
         //远平面视角far:10000
         this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 50000);
         /*
            设置相机位置，注意threejs中的坐标系采用的是右手坐标系
             */
         // 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);
@@ -142,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++) {
@@ -175,210 +299,128 @@
         // plane.position.y = - 200;
         // plane.receiveShadow = true;
         // this.addObject(plane);
         //

         // 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) {
                  let crn = new StoreCrn(group.crn, object);
                  for (var line of group.lines) {
            if (Store3DData !== undefined && Store3DData !== null) {
               for(let group of Store3DData.data.store.groups) {
                  new StoreCrn(group.crn, object);
                  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);
                     }
                  }
               }













               //显示仓库区域
               // for (let i = 0; i < Store3DData.Areas.length; i++) {
               //    let optionArea = Store3DData.Areas[i];
               //    let area = new StoreArea(optionArea);
               //    object.addObject(area);
               //    //显示仓库
               //    for (let j = 0; j < optionArea.Stores.length; j++) {
               //       let optionStore = optionArea.Stores[j];
               //       optionStore.Position = CommonFunction.transPosition(optionStore.Position, optionArea.Position);
               //       let store = new Store(optionStore);
               //       // object.addObject(store);
               //       //显示每行信息
               //       for (let k = 0; k < optionStore.Groups.length; k++) {
               //          let optionGroup = optionStore.Groups[k];
               //          optionGroup.Position = CommonFunction.transPosition(optionGroup.Position, optionStore.Position);
               //          let shelf = new StoreShelf(optionGroup);
               //          let group=new StoreGroup(optionGroup,1);
               //          object.addObject(shelf);
               //          // object.addObject(group);
               //          //显示库位上的货物
               //          for (let m = 0; m < optionGroup.Bins.length; m++) {
               //              let optionBin = optionGroup.Bins[m];
               //              let existGoods=this.getExistedGoodType(optionBin.State);
               //              let storeGoods = new StoreGoods(optionGroup, optionBin);
               //              if(existGoods==null) {
               //                  let goods=storeGoods.create();
               //                  object.addObject(goods);
               //                  this.goodTypes.push({type: optionBin.State, object: goods});
               //              } else {
               //                  let goods= storeGoods.clone(existGoods);
               //                  object.addObject(goods);
               //              }
               //          }
               //       }
               //
               //    }
               // }
               // this.firstTime = 0;
               this.firstTime = 0;
            }
         }
      }
      this.queryTask = function () {
         if (this.firstTime === 1) {
            queryTaskCurrent();
            this.wrkTasks = TaskData;
         }
      }
      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;
      this.queryCrn = function () {
         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) {
                     crnTask.modify(crnData);
                  }
               }
            }
         }
         return null;
      }
      this.initModel = function () {
         let that = this;
         // let object;
         // const onProgress = function ( xhr ) {
         //    if ( xhr.lengthComputable ) {
         //       const percentComplete = xhr.loaded / xhr.total * 100;
         //       console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
         //    }
         // };
         // const onError = function () { };
         // function loadModel() {
         //    object.traverse( function ( child ) {
         //       if ( child.isMesh ) child.material.map = texture;
         //    } );
         //    object.position.y = 195;
         //    that.addObject( object );
         // }
         // const manager = new THREE.LoadingManager(loadModel);
         // const textureLoader = new THREE.TextureLoader( manager );
         // const texture = textureLoader.load( '../static/model/obj/uv_grid_opengl.jpg' );
         // const loader = new OBJLoader( manager );
         // loader.load( '../static/model/obj/AGV.obj', function ( obj ) {
         //    object = obj;
         // }, onProgress, onError );
         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 = -500;
                     object.position.x = -2060;
                     // object.position.z = 0;
                     // object.position.x = 0;
                     // object.position.y = 0;
                     object.scale.set(0.025, 0.025, 0.025);
                     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 = -500;
                     object.position.x = -2060;
                     object.scale.set(0.025, 0.025, 0.025);
                     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 = -500;
                     object.position.x = -2060;
                     object.scale.set(0.025, 0.025, 0.025);
                     object.rotateY(- Math.PI / 2)
                     that.addObject( object );
                  }, null, null );
            });
      }
      this.initModelMove = function () {
         for (var wrkMast of this.wrkTasks) {
            let crnBody = getArrVal(this.objects, "name", wrkMast.crnNo + "-body");
            // 取货点定位
            let sourceLocPosition = getBinPosition(wrkMast.sourceLocNo);
            let points = [crnBody.position, sourceLocPosition];
            this.curve = new Route(points);
            console.log(this.curve);
      this.crnMove = function () {
         for (let crnTask of this.crnTasks) {
            crnTask.move();
         }
      }
      this.modelMove = function () {
         if (this.curve) {
            this.time = this.time + 1;
            let points = this.curve.getPoints(2000);
            let point = points[this.time];
            let point1 = points[this.time+1];
            if(this.time >= 2000) {
               this.time = 0;
            }
            if(point&&point.x){
               this.AgvCar.position.set(point.x,40,point.z);
               this.AgvCar.lookAt(point1.x,40,point1.z);
      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) {
                  console.log(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();
      }
   },


};