three.js后处理之bloom 泛光

引入文件

<script src="../../plugins/threeLibrary/three.min.js"></script>
<script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
<script src="../../plugins/CopyShader.js"></script>
<script src="../../plugins/EffectComposer.js"></script>
<script src="../../plugins/RenderPass.js"></script>
<script src="../../plugins/ShaderPass.js"></script>
<script src="../../plugins/LuminosityHighPassShader.js"></script>
<script src="../../plugins/UnrealBloomPass.js"></script>

 

function initThree(elid,options) {
    let  scene,camera ,renderer,viewer
    viewer={}
    el =  document.getElementById(elid)
    const  width = el.offsetWidth, height = el.offsetHeight,asp =  width / height
    renderer = new THREE.WebGLRenderer({antialias : true});
    renderer.setSize(width, height);
    el.append(renderer.domElement);
    renderer.setClearColor('#000')
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(45, asp, 1, 10000)
    camera.position.set(10,10,10)
    camera.lookAt(0,0,0)
    scene.add(camera)
    viewer.scene=scene
    viewer.camera=camera
    viewer.renderer=renderer
    const controls = new THREE.OrbitControls( camera, renderer.domElement );
    // 如果使用animate方法时，将此函数删除
    controls.addEventListener( 'change', ()=>{
        renderer.render( scene, camera );
    });
    viewer.controls=controls
    renderer.render( scene, camera );

    return viewer
}

 let app=new initThree('box')
    let scene=app.scene
    let renderer=app.renderer
    let camera=app.camera
    let controls=app.controls
    const clock = new THREE.Clock()


    const group1 = new THREE.Group()
    group1.layers.set(1)
    const group2 =  new THREE.Group()

    scene.add(group1,group2)

    //add light
    const directionalLight = new THREE.DirectionalLight( '#fff' )
    directionalLight.position.set( 30, 30, 30 ).normalize()
    scene.add( directionalLight )
    const ambientLight = new THREE.AmbientLight('#fff',0.3) // obj 唯一 id
    scene.add(ambientLight)


    // add status
    /*  **** **** ****   ****/
    // renderer.toneMapping = THREE.ReinhardToneMapping;

    const box = new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshBasicMaterial({color:'red'}))
    group1.add(box)
    //如果是如果 需要 深度遍历 设置layers
    group1.traverse(e => {
        e.layers.set(1)
    })
    const  geometry = new THREE.IcosahedronBufferGeometry( 1, 4 );
    for ( let i = 0; i < 10; i ++ ) {
        const  color = new THREE.Color();
        color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );

        const material = new THREE.MeshBasicMaterial( { color: color } );
        const sphere = new THREE.Mesh( geometry, material );
        sphere.position.x = Math.random() * 10 - 5;
        sphere.position.y = Math.random() * 10 - 5;
        sphere.position.z = Math.random() * 10 - 5;
        sphere.position.normalize().multiplyScalar( Math.random() * 4.0 + 2.0 );
        sphere.scale.setScalar( Math.random() * Math.random() + 0.5 );
        group2.add( sphere );

        // if ( Math.random() < 0.25 ) sphere.layers.enable( 2 ); // set layer

    }

    //创建 RenderPass
    const renderScene = new THREE.RenderPass( scene, camera )

    //创建 bloomPass
    const  bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( el.offsetWidth, el.offsetHeight  ), 1.5, 0.4, 0.85 );
    // bloomPass.renderToScreen = true;
    bloomPass.renderToScreen = true;
    bloomPass.threshold = 0;
    bloomPass.strength = 5;
    bloomPass.radius = 0;

    //创建 EffectComposer
    const  bloomComposer = new THREE.EffectComposer( renderer )
    bloomComposer.setSize( el.offsetWidth,  el.offsetHeight );
    bloomComposer.addPass( renderScene );
    // 眩光通道bloomPass插入到composer
    bloomComposer.addPass( bloomPass )

    bloomComposer.render()

    //set controls
    // controls.addEventListener( 'change', function () {
    //     bloomComposer.render()
    // } )
    // controls.autoRotate = false

    //when window resize
    renderer.autoClear = false //这个一定要加上 !!!!!!!

    function render() {
        //render layer0 boom
        renderer.clear()
        camera.layers.set(0)
        bloomComposer.render()

        //render layer1 normal
        renderer.clearDepth()
        camera.layers.set(1)
        renderer.render(scene,camera)

        controls.update(clock.getDelta())
        requestAnimationFrame(render)

    }
    render()