#

luxiaotao1123

2022-01-04 0d0d52d7b35e41335cf2a8dcce8e1e3cef96811e

 static/js/app.js

@@ -1,11 +1,17 @@
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 { Sky } from './object/Sky.js';
import {StoreConvey} from './object/StoreConvey.js';
import {StoreGoods} from './object/StoreGoods.js';


var APP = {
@@ -18,6 +24,7 @@
      this.objects = [];//场景中所有对象的集合
      this.firstTime = 1;
      this.stats = null;
      this.outlinePass = null;
      this.goodTypes=[];//存储所有的库位类型
      this.crnTasks = [];// 堆垛机列表
      this.moveForward = false;//是否向前运行
@@ -29,7 +36,7 @@
      this.direction = new THREE.Vector3();
      this.raycaster = null;
      this.prevTime = performance.now();//上一次render的时间
      this.backgroundType = false;
      this.backgroundType = true;

      this.start = function () {
         this.initMain();
@@ -44,15 +51,22 @@
         this.initStats();
         this.initLight();
         this.initReSize(this);
         this.initOutLine();
         // this.initComposer();
         this.initObjectSelect();
         this.initPointLockControl(this);
         this.initFloor();
         this.initBuilding();
         this.initTransporter(this);
         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();
@@ -64,80 +78,45 @@
      }
      this.initCamera = function () {
         if (this.camera === null) {
            //声明一个透视相机，
            // 视角：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.position.set( -350, 600, 1100 );
            this.camera.lookAt( this.scene.position );
            //将相机放到场景中
            this.scene.add(this.camera);
         } else {
            this.camera.position.set( - 350, 1070, 1550 );
            this.camera.position.set( -350, 600, 1100 );
            this.camera.lookAt( this.scene.position );
         }
      }
      this.initRenderer = function () {
         this.renderer = new THREE.WebGLRenderer();

         // this.renderer.outputEncoding = THREE.sRGBEncoding;
         // this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
         // this.renderer.toneMappingExposure = 0.5;

         // 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);

         // const bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
         // var bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
         //
         // var bulbMat = new THREE.MeshStandardMaterial( {
         //    emissive: 0xffffee,
         //    emissiveIntensity: 1,
         //    color: 0x000000
         // } );
         // bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
         // bulbLight.position.set( -500, 22, 0 );
         // bulbLight.castShadow = true;
         // this.addObject( bulbLight );
         //
         // var hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
         // this.addObject( hemiLight );
         // 阴影聚光灯
         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);
@@ -157,7 +136,8 @@
      }
      this.initBackground = function () {
         if (this.backgroundType) {
            this.scene.background = new THREE.Color( 0xf0f0f0 );
            // 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/' );
@@ -167,29 +147,6 @@
               "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 () {
@@ -198,9 +155,33 @@
            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, 10 );
         this.raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0,  50 );

         const onKeyDown = function ( event ) {
            switch ( event.code ) {
@@ -318,8 +299,10 @@

         // 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 );
@@ -338,43 +321,21 @@
            }
         }
      }
      this.initTransporter = function (object) {
         // const manager = new THREE.LoadingManager();
         // new MTLLoader(manager)
         //    .setPath( '../static/model/obj/' )
         //    .load( '13213.mtl', function ( materials ) {
         //       materials.preload();
         //       new OBJLoader( manager )
         //          .setMaterials( materials )
         //          .setPath( '../static/model/obj/' )
         //          .load( '13213.obj', function ( obj ) {
         //             obj.traverse (function (child) {
         //                if (child instanceof THREE.Mesh) {
         //                   child.material = new THREE.MeshLambertMaterial({
         //                      color: 0xCD6839
         //                   });
         //                }
         //             });
         //
         //             obj.scale.set(0.03, 0.03, 0.03);
         //             obj.rotateY(- Math.PI / 2);
         //             // obj.name = option.crnNo + "-body";
         //             obj.position.x = 0;
         //             obj.position.y = 0;
         //             obj.position.z = 0;
         //             object.addObject( obj );
         //          }, null, null );
         //    });

      this.initConvey = function () {
         let storeConvey = new StoreConvey(this, conveyObjects.objects)
         storeConvey.load();
      }
      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);
                     object.addObject(shelf.mesh);
                     if (line.bins !== null) {
                        new StoreGoods(object, line.bins, shelf);
                     }
                     //显示库位上的货物
                     // for (var bin of line.bins) {
                     //    let existGoods=this.getExistedGoodType(bin.State);
@@ -403,7 +364,6 @@
                  this.crnTasks.push(new CrnTask(crnData, this));
               } else {
                  if(!crnTask.run) {
                     // console.log(2)
                     crnTask.modify(crnData);
                  }
               }
@@ -445,6 +405,21 @@
         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();
      }
   },

};