three.js后处理之FXAA 抗锯齿

引入的js

<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/FXAAShader.js"></script>
<script src="../../plugins/EffectComposer.js"></script>
<script src="../../plugins/RenderPass.js"></script>
<script src="../../plugins/ShaderPass.js"></script>

<script src="../../plugins/ysThree.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()
    scene.background = new THREE.Color( 0xffffff )
    scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 )


    /** need  **/
    renderer.autoClear = false //必须要关闭 不然 不显示

    //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
    /*  **** **** ****   ****/
    camera.position.set(0,0,500)

    group = new THREE.Group();

    const geometry = new THREE.TetrahedronBufferGeometry( 10 );
    const material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );

    for ( let i = 0; i < 100; i ++ ) {

        let mesh = new THREE.Mesh( geometry, material );

        mesh.position.x = Math.random() * 500 - 250;
        mesh.position.y = Math.random() * 500 - 250;
        mesh.position.z = Math.random() * 500 - 250;

        mesh.scale.setScalar( Math.random() * 2 + 1 );

        mesh.rotation.x = Math.random() * Math.PI;
        mesh.rotation.y = Math.random() * Math.PI;
        mesh.rotation.z = Math.random() * Math.PI;

        group.add( mesh );

    }
    scene.add( group )



    //RenderPass
    const renderPass = new THREE.RenderPass( scene, camera )
    //使用FXAAShader
    const fxaaPass = new THREE.ShaderPass( THREE.FXAAShader )
    const pixelRatio = renderer.getPixelRatio()
    fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( el.offsetWidth * pixelRatio )
    fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( el.offsetHeight * pixelRatio )
    composer1 = new THREE.EffectComposer( renderer )
    composer1.addPass( renderPass );
    composer1.addPass( fxaaPass );

    //不使用
    const copyPass = new THREE.ShaderPass( THREE.CopyShader )
    composer2 = new THREE.EffectComposer( renderer )
    composer2.addPass( renderPass )
    composer2.addPass( copyPass )




    function render() {


        const halfWidth = el.offsetWidth / 2;

        group.rotation.y += clock.getDelta() * 0.1;

        renderer.setViewport( 0, 0, halfWidth, el.offsetHeight )
        composer1.render()
        renderer.setViewport( halfWidth, 0, halfWidth, el.offsetHeight )
        composer2.render()

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

    }
    render()