#

luxiaotao1123

2021-12-18 3b06e28a50df252b22890aebd706fa0b61b3c74c

 static/js/app.js

@@ -1,9 +1,12 @@
import {OrbitControls} from './lib/OrbitControls.js';
import { PointerLockControls } from './lib/PointerLockControls.js';
import Stats from './lib/stats.module.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';


var APP = {

@@ -17,8 +20,15 @@
      this.stats = null;
      this.goodTypes=[];//存储所有的库位类型
      this.crnTasks = [];// 堆垛机列表
      this.time = 0;//标记堆垛机运行的时间
      this.progress = 0;
      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.start = function () {
         this.initMain();
@@ -33,6 +43,7 @@
         this.initStats();
         this.initLight();
         this.initReSize(this);
         this.initPointLockControl(this);
         this.initFloor();
         this.initModel();
         this.initStoreObjects(this);
@@ -41,6 +52,7 @@
         requestAnimationFrame(this.animate.bind(this));
         this.stats.begin();
         this.renderer.render(this.scene, this.camera);
         this.firstPersonMove();
         this.stats.end();
         this.queryCrn();
         this.crnMove();
@@ -72,6 +84,10 @@
         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;
         //
@@ -79,6 +95,8 @@
         this.renderer.setSize( window.innerWidth, window.innerHeight );
         this.dom = document.getElementById("container");
         this.dom.appendChild( this.renderer.domElement );


      }
      this.initLight = function () {

@@ -130,14 +148,38 @@
         // this.dom.appendChild( this.stats.dom );
      }
      this.initBackground = function () {
         const cubeTextureLoader = new THREE.CubeTextureLoader();
         cubeTextureLoader.setPath( '../static/img/skybox/' );
         this.scene.background = cubeTextureLoader.load([
            "px.jpg", "nx.jpg",
            "py.jpg", "ny.jpg",
            "pz.jpg", "nz.jpg"
         ]);
         // this.scene.background = new THREE.Color( 0xf0f0f0 );
         // const cubeTextureLoader = new THREE.CubeTextureLoader();
         // cubeTextureLoader.setPath( '../static/img/skybox/' );
         // this.scene.background = cubeTextureLoader.load([
         //    "px.jpg", "nx.jpg",
         //    "py.jpg", "ny.jpg",
         //    "pz.jpg", "nz.jpg"
         // ]);
         this.scene.background = new THREE.Color( 0xf0f0f0 );

         // 太阳
         // 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 () {
@@ -145,6 +187,102 @@
            object.camera.updateProjectionMatrix();
            object.renderer.setSize(window.innerWidth, window.innerHeight);
         }, false);
      }
      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 );

         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 += 350;
                  }
                  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;
            }
         };

         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 * 400.0 * delta;
            if ( this.moveLeft || this.moveRight ) this.velocity.x -= this.direction.x * 400.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.lockControl = function () {
         this.camera.position.y = 100;
         this.camera.lookAt(0,100,0);
         this.controls.getObject().position.x =0;
         this.controls.getObject().position.y =100;
         this.controls.getObject().position.z =580;
         this.controls.lock();
      }
      this.removeObject = function (nameorid) {
         for (let i = 0; i < this.objects.length; i++) {
@@ -282,17 +420,6 @@
         //             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) {
         for (let crnTask of this.crnTasks) {