请问three.js如何在一个页面new出多个实例？

Question

1.设计要求在轮播图中使用rgbShift效果，谷歌搜索找到three的例子于是进行改造后使用。单张图片使用没问题。但是放在轮播中就只有第一张图片显示出来的。
2.我们来看看代码

<div class="swiper-container">
                    <div class="swiper-wrapper">
                        <!-- s1 -->
                        <div class="swiper-slide s1">
                            <div class="top">
                                <img class="slide-bj" src="images/slide/bj.jpg">
                                <div class="people whpa" id="swiperOne"></div>
                                <div class="zhe whpa"></div>
                                <div class="meng whpa"></div>
                                <div class="lang">
                                    <img src="images/lang.png">
                                </div>
                                <div class="page-2-head">
                                    <img src="images/head/head-1.png">
                                </div>
                                <div class="believe">
                                    <img src="images/slide/believe-1.png">
                                </div>
                            </div>
                            <div class="text-box">
                                <div class="title">
                                    <span class="name">轮播1</span>
                                    <span class="country"><span> - </span>轮播1</span>
                                </div>
                                <div class="type">（轮播1）</div>
                                <div class="culture">轮播1</div>
                            </div>
                        </div>
                        <!-- s2 -->
                        <div class="swiper-slide s2">
                            <div class="top">
                                <img class="slide-bj" src="images/slide/bj.jpg">
                                <div class="people whpa" id="swiperTwo"></div>
                                <div class="zhe whpa"></div>
                                <div class="meng whpa"></div>
                                <div class="lang">
                                    <img src="images/lang.png">
                                </div>
                                <div class="page-2-head">
                                    <img src="images/head/head-2.png">
                                </div>
                                <div class="believe">
                                    <img src="images/slide/believe-2.png">
                                </div>
                            </div>
                            <div class="text-box">
                                <div class="title">
                                    <span class="name">轮播2</span>
                                    <span class="country"><span> - </span>轮播2</span>
                                </div>
                                <div class="type">（轮播2）</div>
                                <div class="culture">轮播2</div>
                            </div>
                        </div>
                        <!-- s3 -->
                        <div class="swiper-slide s3">
                            <div class="top">
                                <img class="slide-bj" src="images/slide/bj.jpg">
                                <div class="people whpa" id="swiperThree"></div>
                                <div class="zhe whpa"></div>
                                <div class="meng whpa"></div>
                                <div class="lang">
                                    <img src="images/lang.png">
                                </div>
                                <div class="page-2-head">
                                    <img src="images/head/head-3.png">
                                </div>
                                <div class="believe">
                                    <img src="images/slide/believe-3.png">
                                </div>
                            </div>
                            <div class="text-box">
                                <div class="title">
                                    <span class="name">轮播3</span>
                                    <span class="country"><span> - </span>轮播3</span>
                                </div>
                                <div class="type">（轮播3）</div>
                                <div class="culture">轮播3</div>
                            </div>
                        </div>
                        <!-- s4 -->
                        <div class="swiper-slide s4">
                            <div class="top">
                                <img class="slide-bj" src="images/slide/bj.jpg">
                                <div class="people whpa" id="swiperFour"></div>
                                <div class="zhe whpa"></div>
                                <div class="meng whpa"></div>
                                <div class="lang">
                                    <img src="images/lang.png">
                                </div>
                                <div class="page-2-head">
                                    <img src="images/head/head-4.png">
                                </div>
                                <div class="believe">
                                    <img src="images/slide/believe-4.png">
                                </div>
                            </div>
                            <div class="text-box">
                                <div class="title">
                                    <span class="name">轮播4</span>
                                    <span class="country"><span> - </span>轮播4</span>
                                </div>
                                <div class="type">（轮播4）</div>
                                <div class="culture">轮播4</div>
                            </div>
                        </div>
                        <!-- s5 -->
                        <div class="swiper-slide s5">
                            <div class="top">
                                <img class="slide-bj" src="images/slide/bj.jpg">
                                <div class="people whpa" id="swiperFive"></div>
                                <div class="zhe whpa"></div>
                                <div class="meng whpa"></div>
                                <div class="lang">
                                    <img src="images/lang.png">
                                </div>
                                <div class="page-2-head">
                                    <img src="images/head/head-5.png">
                                </div>
                                <div class="believe">
                                    <img src="images/slide/believe-5.png">
                                </div>
                            </div>
                            <div class="text-box">
                                <div class="title">
                                    <span class="name">轮播5</span>
                                    <span class="country"><span> - </span>轮播5</span>
                                </div>
                                <div class="type">（轮播5）</div>
                                <div class="culture">轮播5</div>
                            </div>
                        </div>
                    </div>
                </div>

var domID1 = "swiperOne";
            var imgSrc1 = "images/slide/people-1.jpg";

            var $swiper = $('.page-2 .center .swiper-container .swiper-wrapper .swiper-slide.s1 .top');
            var swiperW = $swiper.width();
            var swiperH = $swiper.height();

            var scene1 = new THREE.Scene();

            var camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); // 角度 近平面 远平面 横纵比

            var webGLRenderer1 = new THREE.WebGLRenderer();
            webGLRenderer1.setSize(swiperW, swiperH);
            webGLRenderer1.shadowMapEnabled = true;

            camera1.position.x = 0;
            camera1.position.y = 0;
            camera1.position.z = 90;
            camera1.lookAt(new THREE.Vector3(0, 0, 0));

            var spotLight1 = new THREE.SpotLight(0xffffff);
            spotLight1.castShadow = false; // 投影

            var ambiLight1 = new THREE.AmbientLight(0xffffff);
            scene1.add(ambiLight1);


            scene1.add(spotLight1);

            var geometry1 = new THREE.PlaneGeometry(50,78);    //矩形平面
            var texture1 = THREE.ImageUtils.loadTexture(imgSrc1); //加载纹理贴图
            var material1=new THREE.MeshLambertMaterial({        //贴图通过材质添加给几何体
                map:texture1,                                    //给纹理属性map赋值
                side:THREE.DoubleSide                           //两面可见
            });                                                 //材质对象
            var mesh1 = new THREE.Mesh(geometry1,material1);       //纹理贴图网格模型对象
            scene1.add(mesh1);                                    //网格模型添加到场景中

            document.getElementById(domID1).appendChild(webGLRenderer1.domElement);

            var rgbShift1 = new THREE.ShaderPass(THREE.RGBShiftShader);

            var rgbAmount1 = 0.01;
            var angle1 = 0;
            var countUp1 = true;
            setInterval(function(){

                if ( countUp1 ) {
                    angle1 += 0.1;
                    rgbShift1.uniforms.angle.value = angle1;
                } else {
                    angle1 -= 0.1;
                    rgbShift1.uniforms.angle.value = angle1;
                }

                if ( countUp1 && angle1 > 3 ) {
                    countUp1 = false;
                } else if ( !countUp1 && angle1 <= 0 ) {
                    countUp1 = true;
                }

            },100);

            rgbShift1.uniforms.amount.value = rgbAmount1;
            rgbShift1.enabled = true;

            var renderPass1 = new THREE.RenderPass(scene1, camera1);
            var effectCopy1 = new THREE.ShaderPass(THREE.CopyShader);
            effectCopy1.renderToScreen = true;

            var composer1 = new THREE.EffectComposer(webGLRenderer1);
            composer1.addPass(renderPass1);
            composer1.addPass(rgbShift1);
            composer1.addPass(effectCopy1);

            render1();

            function render1() {
                requestAnimationFrame(render1);
                composer1.render();
            }

我在每个轮播项中需要rgbShift效果的div加了个ID，写了5份js，每份的区别就是var后面的序号1-5。但是只有第一个能实现效果。

请问这个问题应该怎么解决？我是新手之前重来没接触过webGl，还请各位大神多多指点。

经过问题排查是最后的重新绘制出现了问题

render1();

function render1() {
    requestAnimationFrame(render1);
    composer1.render();
}

就是这段代码，哪位大神能解释一下。