#

luxiaotao1123

2021-12-22 cf10faae94449dc99d0261f36d830134481f27ae

 static/js/app.js

@@ -29,6 +29,7 @@
      this.direction = new THREE.Vector3();
      this.raycaster = null;
      this.prevTime = performance.now();//上一次render的时间
      this.backgroundType = false;

      this.start = function () {
         this.initMain();
@@ -45,15 +46,16 @@
         this.initReSize(this);
         this.initPointLockControl(this);
         this.initFloor();
         this.initModel();
         this.initStoreObjects(this);
         this.initBuilding();
         this.initTransporter(this);
      }
      this.animate = function () {
         requestAnimationFrame(this.animate.bind(this));
         this.stats.begin();
         this.renderer.render(this.scene, this.camera);
         this.stats.end();
         this.firstPersonMove();
         this.initStoreObjects(this);
         this.stats.end();
         this.queryCrn();
         this.crnMove();
      }
@@ -61,24 +63,29 @@
         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) {
            //声明一个透视相机，
            // 视角：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);
         } else {
            this.camera.position.set( - 350, 1070, 1550 );
            this.camera.lookAt( this.scene.position );
         }
      }
      this.initRenderer = function () {
         this.renderer = new THREE.WebGLRenderer();
@@ -145,18 +152,21 @@
      }
      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/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 );

         if (this.backgroundType) {
            this.scene.background = new THREE.Color( 0xf0f0f0 );
         } 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"
            ]);
         }
         // 太阳
         // let sky = new Sky();
         // sky.scale.setScalar( 450000 );
@@ -211,7 +221,9 @@
                  object.moveRight = true;
                  break;
               case 'Space':
                  if ( object.canJump === true ) object.velocity.y += 350;
                  if ( object.canJump === true )  {
                     object.velocity.y += 450;
                  }
                  object.canJump = false;
                  break;
            }
@@ -237,67 +249,50 @@
                  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;
            var time = performance.now();
            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 ( 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.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.prevTime = time;
      }
      this.removeObject = function (nameorid) {
         for (let i = 0; i < this.objects.length; i++) {
@@ -331,10 +326,50 @@

         // 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.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.initStoreObjects = function (object) {
         if (this.firstTime === 1) {
            initStore();
            if (Store3DData !== null) {
            if (Store3DData !== undefined && Store3DData !== null) {
               for(var group of Store3DData.data.store.groups) {
                  new StoreCrn(group.crn, object);
                  for (var line of group.lines) {
@@ -356,11 +391,12 @@

                  }
               }
               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) {
@@ -383,64 +419,32 @@
         }
         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.crnMove = function (object) {
         for (let crnTask of this.crnTasks) {
            crnTask.move();
         }
      }

      // 功能方法区
      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 = 0;
         this.controls.getObject().position.y = 200;
         this.controls.getObject().position.z = 180;
         this.controls.lock();
      }
   },

};