blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
#
luxiaotao1123
2022-01-03 9261007f12a6250141e30cfc43c37c5a093f1430 
 static/js/app.js


@@ -5,6 +5,7 @@


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';


@@ -52,7 +53,7 @@


         this.initLight();


         this.initReSize(this);


         this.initOutLine();


         this.initComposer();


         // this.initComposer();


         this.initObjectSelect();


         this.initPointLockControl(this);


         this.initFloor();


@@ -62,7 +63,11 @@


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


@@ -92,7 +97,7 @@


         // this.renderer.toneMapping = THREE.CineonToneMapping;   // 色调


         this.renderer.setSize(window.innerWidth, window.innerHeight);


         this.renderer.setPixelRatio( window.devicePixelRatio );


         this.renderer.shadowMap.enabled = false;


         this.renderer.shadowMap.enabled = true;


         this.renderer.shadowMap.type = THREE.BasicShadowMap;


         this.dom = document.getElementById("container");


         this.dom.appendChild(this.renderer.domElement);


@@ -103,6 +108,7 @@


         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);//模拟远处类似太阳的光源


@@ -122,9 +128,8 @@


         pointLight.castShadow = true;


         pointLight.shadow.camera.near = 2000;


         pointLight.shadow.camera.far = 10000;


         pointLight.shadow.mapSize.height = 100000;


         pointLight.shadow.mapSize.width = 100000;


         // 将所有创建的物体加入到场景中去


         pointLight.shadow.mapSize.height = 200000;


         pointLight.shadow.mapSize.width = 200000;


         this.addObject(pointLight);


      }


      this.initOrbitControl = function () {


@@ -189,18 +194,24 @@


      }


      this.initOutLine = function(){


         this.outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.scene, this.camera )


         this.outlinePass.edgeStrength = 10;//包围线浓度


         this.outlinePass.edgeGlow = 0.1;//边缘线范围


         this.outlinePass.edgeThickness = 1;//边缘线浓度


         this.outlinePass.pulsePeriod = 2;//包围线闪烁评率


         this.outlinePass.visibleEdgeColor.set('#B31985');//包围线颜色


         this.outlinePass.hiddenEdgeColor.set('#190a05');//被遮挡的边界线颜色


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