看DEMO的名字 這個特效是參考UE4的 很炫

下面是需要的標頭檔案
<script src="js/loaders/RGBELoader.js"></script>
<script src="js/loaders/HDRCubeTextureLoader.js"></script>
<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/LuminosityHighPassShader.js"></script>
<script src="js/postprocessing/UnrealBloomPass.js"></script>
輝光的原理 瞭解過的是渲染一個場景進行模糊 再渲染一個原本的場景 再混合兩個texture作為最後到螢幕的紋理
這個基於UE4的渲染方式，不知道有什麼不一樣的操作
         var createRenderer=function()
        {
         renderer=new THREE.WebGLRenderer({ antialias: true });
         renderer.setClearColor(0x000000);
         renderer.setSize(window.innerWidth,window.innerHeight);
         renderer.shadowMap.enabled = true;
         renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
         renderer.toneMapping = THREE.LinearToneMapping;這個是使HDR保留細節的東西。
         renderer.domElement.style.position = "relative";    
         document.body.appendChild( renderer.domElement );
         
         }
        先來建立一個球
        載入資源
        var genCubeUrls = function ( prefix, postfix ) {

                    return [
                        prefix + 'px' + postfix, prefix + 'nx' + postfix,
                        prefix + 'py' + postfix, prefix + 'ny' + postfix,
                        prefix + 'pz' + postfix, prefix + 'nz' + postfix
                    ];

                };

                var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
                new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {

                    var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
                    pmremGenerator.update( renderer );

                    var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
                    pmremCubeUVPacker.update( renderer );

                    hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

                } );
        var     standardMaterial = new THREE.MeshStandardMaterial( {
                    map: null,
                    color: 0xffffff,
                    metalness: 1.0
                } );
    var textureLoader = new THREE.TextureLoader();
    textureLoader.load( './textures/roughness_map.jpg', function ( map ) {

                    map.wrapS = THREE.RepeatWrapping;
                    map.wrapT = THREE.RepeatWrapping;
                    map.anisotropy = 4;
                    map.repeat.set( 9, 2 );
                    standardMaterial.roughnessMap = map;
                    standardMaterial.bumpMap = map;
                    standardMaterial.needsUpdate = true;

    } );
    這個是DEMO裡面的一個立方體紋理 感覺像偽反光用的。
  var geo2=new THREE.SphereGeometry(20,50,50);
  var material=new THREE.MeshLambertMaterial({color:0xffffff});
  var mesh2 =new THREE.Mesh(geo2,material);
  mesh2.castShadow = true;
  scene.add(mesh2);
  
  
    var renderScene = new THREE.RenderPass( scene, camera );第一層通道繪製應該是原圖

    var    effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );這個應該是模糊了
    effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );這個值應該是範圍
            
    var bloomPass=new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth,window.innerHeight),1.5,0.4,0.85);
    這個應該是混合兩個紋理吧 猜的。
    bloomPass.renderToScreen=true;
    renderer.gammaInput = true;GAMMA矯正把計算機畫面弄得更像人眼效果
    renderer.gammaOutput = true;
    
    使用通道
    composer = new THREE.EffectComposer(renderer);
    composer.setSize(window.innerWidth,window.innerHeight);
    composer.addPass(renderScene);
    composer.addPass(effectFXAA);
    composer.addPass(bloomPass);
    
     var render=function()
   {
   如果使用了那個standardMaterial
   //begin
      if ( standardMaterial !== undefined ) {

                    standardMaterial.roughness = 1.0;
                    standardMaterial.bumpScale = 0.25;

                    var newEnvMap = standardMaterial.envMap;把環境貼圖作為紋理貼在物體上 

                    if ( hdrCubeRenderTarget ) newEnvMap = hdrCubeRenderTarget.texture;

                    if ( newEnvMap !== standardMaterial.envMap ) {

                        standardMaterial.envMap = newEnvMap;
                        standardMaterial.envMapIntensity = 1;
                        standardMaterial.needsUpdate = true;

                    }

                }
   
   //end
         renderer.toneMappingExposure = Math.pow( 1.3, 4.0 );
         requestAnimationFrame(render);
         composer.render();
    }