#

luxiaotao1123

2021-12-28 ebf2ca66bd8d6324080d52298b7a737483110062

 static/js/app.js

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

      this.start = function () {
         this.initMain();
@@ -65,20 +65,7 @@
      }
      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, 600, 1100 );
            this.camera.lookAt( this.scene.position );
            //将相机放到场景中
@@ -91,54 +78,46 @@
      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.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 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.shadow.camera.near = 2000;
         pointLight.shadow.camera.far = 10000;
         pointLight.shadow.mapSize.height = 100000;
         pointLight.shadow.mapSize.width = 100000;
         // 将所有创建的物体加入到场景中去
         this.addObject(pointLight);
      }
      this.initOrbitControl = function () {
         this.orbitControl = new OrbitControls(this.camera, this.renderer.domElement);