#

luxiaotao1123

2022-07-05 4bd338d1b8a81061c279ba718db5fa0420272a97

 static/js/app.js

@@ -5,14 +5,14 @@
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 { Sky } from './object/Sky.js';


import {StoreGoods} from './object/StoreGoods.js';
import {StaTask} from './object/StaTask.js';

var APP = {

@@ -25,8 +25,8 @@
      this.firstTime = 1;
      this.stats = null;
      this.outlinePass = null;
      this.goodTypes=[];//存储所有的库位类型
      this.crnTasks = [];// 堆垛机列表
      this.staTasks = [];// 输送线列表
      this.moveForward = false;//是否向前运行
      this.moveBackward = false;//是否向后运行
      this.moveLeft = false;//是否向左运行
@@ -52,7 +52,7 @@
         this.initLight();
         this.initReSize(this);
         this.initOutLine();
         this.initComposer();
         // this.initComposer();
         this.initObjectSelect();
         this.initPointLockControl(this);
         this.initFloor();
@@ -62,12 +62,17 @@
      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.initScene = function () {
         this.scene = new THREE.Scene();
@@ -92,7 +97,7 @@
         // this.renderer.toneMapping = THREE.CineonToneMapping;   // 色调
         this.renderer.setSize(window.innerWidth, window.innerHeight);
         this.renderer.setPixelRatio( window.devicePixelRatio );
         this.renderer.shadowMap.enabled = false;
         // this.renderer.shadowMap.enabled = true;   // 是否开启阴影
         this.renderer.shadowMap.type = THREE.BasicShadowMap;
         this.dom = document.getElementById("container");
         this.dom.appendChild(this.renderer.domElement);
@@ -104,27 +109,14 @@
         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);

         // 阴影聚光灯
         let pointLight = new THREE.SpotLight(0xFFFAFA,1);
         pointLight.position.set(0, 1500, 2500);
         pointLight.castShadow = true;
         // pointLight.castShadow = true;    // 是否开启阴影
         pointLight.shadow.camera.near = 2000;
         pointLight.shadow.camera.far = 10000;
         pointLight.shadow.mapSize.height = 100000;
         pointLight.shadow.mapSize.width = 100000;
         // 将所有创建的物体加入到场景中去
         pointLight.shadow.mapSize.height = 200000;
         pointLight.shadow.mapSize.width = 200000;
         this.addObject(pointLight);
      }
      this.initOrbitControl = function () {
@@ -149,36 +141,13 @@
            this.scene.background = new THREE.Color( 0x333333 );
         } else {
            const cubeTextureLoader = new THREE.CubeTextureLoader();
            cubeTextureLoader.setPath( '../static/img/skybox0/' );
            cubeTextureLoader.setPath( '../static/img/skybox/' );
            this.scene.background = cubeTextureLoader.load([
               "px.jpg", "nx.jpg",
               "py.jpg", "ny.jpg",
               "pz.jpg", "nz.jpg"
            ]);
         }
         // 太阳
         // let sky = new Sky();
         // sky.scale.setScalar( 450000 );
         // this.addObject( sky );
         // let sun = new THREE.Vector3();
         // const effectController = {
         //    turbidity: 10,
         //    rayleigh: 3,
         //    mieCoefficient: 0.005,
         //    mieDirectionalG: 0.7,
         //    elevation: 2,
         //    azimuth: 180,
         //    exposure: this.renderer.toneMappingExposure
         // };
         // const uniforms = sky.material.uniforms;
         // uniforms[ 'turbidity' ].value = effectController.turbidity;
         // uniforms[ 'rayleigh' ].value = effectController.rayleigh;
         // uniforms[ 'mieCoefficient' ].value = effectController.mieCoefficient;
         // uniforms[ 'mieDirectionalG' ].value = effectController.mieDirectionalG;
         // const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
         // const theta = THREE.MathUtils.degToRad( effectController.azimuth );
         // sun.setFromSphericalCoords( 1, phi, theta );
         // uniforms[ 'sunPosition' ].value.copy( sun );
      }
      this.initReSize = function(object){
         window.addEventListener('resize', function () {
@@ -189,21 +158,27 @@
      }
      this.initOutLine = function(){
         this.outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.scene, this.camera )
         this.outlinePass.edgeStrength = 10;//包围线浓度
         this.outlinePass.edgeGlow = 0.1;//边缘线范围
         this.outlinePass.edgeThickness = 1;//边缘线浓度
         this.outlinePass.pulsePeriod = 2;//包围线闪烁评率
         this.outlinePass.visibleEdgeColor.set('#B31985');//包围线颜色
         this.outlinePass.hiddenEdgeColor.set('#190a05');//被遮挡的边界线颜色
         // 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);
         new ObjectSelect(this.scene, this.camera, this.outlinePass, this);
      }
      this.initPointLockControl = function(object){
         this.controls = new PointerLockControls( this.camera, document.body );
@@ -354,25 +329,14 @@
      this.initStoreObjects = function (object) {
         if (this.firstTime === 1) {
            if (Store3DData !== undefined && Store3DData !== null) {
               for(var group of Store3DData.data.store.groups) {
               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;
@@ -393,20 +357,25 @@
            }
         }
      }
      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.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.isDel) {
                     staTask.modify(staData);
                  }
               }
            }
         }
      }

      // 功能方法区
      this.changeStats = function () {