three.js後處理之 afterimage-運動幻影效果

使用的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/EffectComposer.js"></script>
<script src="../../plugins/RenderPass.js"></script>
<script src="../../plugins/ShaderPass.js"></script>
<script src="../../plugins/AfterimagePass.js"></script>
<script src="../../plugins/AfterimageShader.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()
    camera.position.set(50,50,50)


    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)


    scene.fog = new THREE.Fog( 0x000000, 1, 1000 );

    const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
    const material = new THREE.MeshNormalMaterial();
    const mesh = new THREE.Mesh( geometry, material );
    const mesh2 = new THREE.Mesh( geometry, material );
    mesh2.position.set(20,0,0)
    scene.add( mesh,mesh2)

    // postprocessing

    const composer = new THREE.EffectComposer( renderer );
    composer.addPass( new THREE.RenderPass( scene, camera ) );
    const afterimagePass = new THREE.AfterimagePass();
    composer.addPass( afterimagePass );



    function render() {


        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        composer.render()

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

    }
    render()