#

luxiaotao1123

2021-12-20 aae6c45254e44b09b1183fd83b3fd7c5a480ea37

 static/js/app.js

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

      this.start = function () {
         this.initMain();
@@ -61,24 +62,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 +151,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/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 );
@@ -212,7 +221,7 @@
                  break;
               case 'Space':
                  if ( object.canJump === true )  {
                     object.velocity.y += 350;
                     object.velocity.y += 450;
                  }
                  object.canJump = false;
                  break;
@@ -239,7 +248,13 @@
                  break;
            }
         };

         this.controls.addEventListener( 'lock', function () {
            console.log("第一人称视角")
         } );
         this.controls.addEventListener( 'unlock', function () {
            console.log("上帝视角");
            object.initCamera();
         } );
         document.addEventListener( 'keydown', onKeyDown );
         document.addEventListener( 'keyup', onKeyUp );

@@ -259,8 +274,8 @@
            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;
@@ -426,6 +441,19 @@
            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();
      }
   },

};