не анимируется второй рендерер - three.js
 

Всем привет!
Возник вопрос в ходе разработки:
На сайт нужно поместить вот такой вот "дымок" https://codepen.io/teolitto/pen/KwOVvL по бокам окна.
Я сделал вот что :

$(window).ready(function () {
    var camera2, scene2, renderer2,
        geometry2, material2, mesh2;

    init();
    animate();

    function init() {
        stats2 = new Stats();
        stats2.setMode(0);
        stats2.domElement.style.position = 'absolute';
        stats2.domElement.style.left = '0px';
        stats2.domElement.style.top = '0px';
        document.body.appendChild(stats2.domElement);

        clock = new THREE.Clock();


        renderer2 = new THREE.WebGLRenderer({ alpha: true }); //allows transparency for line 264
        renderer2.setSize( window.innerWidth, window.innerHeight );
        renderer2.setClearColor(0xff0000, 0);


        scene2 = new THREE.Scene();

        camera2 = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 10000 );
        camera2.position.z = 1000;
        camera2.filmOffset = 150;
        scene2.add( camera2 );

        geometry2 = new THREE.CubeGeometry( 200, 200, 200 );
        material2 = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } );
        mesh2 = new THREE.Mesh( geometry2, material2 );
        //scene.add( mesh2 );
        cubeSineDriver = 0;

        textGeo = new THREE.PlaneGeometry(300,300);
        THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS
        textTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png');
        textMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff, opacity: 0, map: textTexture, transparent: true, blending: THREE.AdditiveBlending})
        text = new THREE.Mesh(textGeo,textMaterial);
        text.position.z = 800;
        scene2.add(text);

        light = new THREE.DirectionalLight(0xffffff,0.5);
        light.position.set(-1,0,1);
        scene2.add(light);

        smokeTexture = THREE.ImageUtils.loadTexture('https://image.ibb.co/g93LW8/Smoke_Element.png');
        smokeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, emisive: 0xffffff, map: smokeTexture, transparent: true});
        smokeGeo = new THREE.PlaneGeometry(300,300);
        smokeParticles = [];


        for (p = 0; p < 150; p++) {
            var particle2 = new THREE.Mesh(smokeGeo,smokeMaterial);
            particle2.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100);
            particle2.rotation.z = Math.random() * 360;
            scene2.add(particle2);
            smokeParticles.push(particle2);
        }

        document.body.appendChild(renderer2.domElement).setAttribute('id','smokeCanvas2');



    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        stats2.begin();
        delta = clock.getDelta();
        requestAnimationFrame( animate );
        evolveSmoke();
        render();
        stats2.end();
    }

    function evolveSmoke() {
        var sp2 = smokeParticles.length;
        while(sp2--) {
            smokeParticles[sp2].rotation.z += (delta * 0.2);
        }
    }

    function render() {

        mesh2.rotation.x += 0.005;
        mesh2.rotation.y += 0.01;
        cubeSineDriver += .01;
        mesh2.position.z = 100 + (Math.sin(cubeSineDriver) * 500);
        renderer2.render( scene2, camera2 );
    }


});


$(window).ready(function () {
    var camera, scene, renderer,
        geometry, material, mesh;

    init();
    animate();

    function init() {
        stats = new Stats();
        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);

        clock = new THREE.Clock();

        renderer = new THREE.WebGLRenderer({ alpha: true }); //allows transparency for line 264
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor(0xff0000, 0);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;
        camera.filmOffset = 150;
        scene.add( camera );

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } );
        mesh = new THREE.Mesh( geometry, material );
        //scene.add( mesh );
        cubeSineDriver = 0;

        textGeo = new THREE.PlaneGeometry(300,300);
        THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS
        textTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png');
        textMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff, opacity: 0, map: textTexture, transparent: true, blending: THREE.AdditiveBlending})
        text = new THREE.Mesh(textGeo,textMaterial);
        text.position.z = 800;
        scene.add(text);

        light = new THREE.DirectionalLight(0xffffff,0.5);
        light.position.set(-1,0,1);
        scene.add(light);

        smokeTexture = THREE.ImageUtils.loadTexture('https://image.ibb.co/g93LW8/Smoke_Element.png');
        smokeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, emisive: 0xffffff, map: smokeTexture, transparent: true});
        smokeGeo = new THREE.PlaneGeometry(300,300);
        smokeParticles = [];


        for (p = 0; p < 150; p++) {
            var particle = new THREE.Mesh(smokeGeo,smokeMaterial);
            particle.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100);
            particle.rotation.z = Math.random() * 360;
            scene.add(particle);
            smokeParticles.push(particle);
        }

        document.body.appendChild(renderer.domElement).setAttribute('id','smokeCanvas1');



    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        stats.begin();
        delta = clock.getDelta();
        requestAnimationFrame( animate );
        evolveSmoke();
        render();
        stats.end();
    }

    function evolveSmoke() {
        var sp = smokeParticles.length;
        while(sp--) {
            smokeParticles[sp].rotation.z += (delta * 0.2);
        }
    }

    function render() {

        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        cubeSineDriver += .01;
        mesh.position.z = 100 + (Math.sin(cubeSineDriver) * 500);
        renderer.render( scene, camera );

    }



});

в общем вызвал два раза функцию построения canvas объекта, но проблема в том что анимируется только один объет, второй просто стоит на месте, но всё же так-же генерируется из этого куска кода. Посоветуйте правильное решение проблемы

drakonolom,
Функции инициализации и анимации у вас два раза описываются под одними и теми же именами с разными внутренностями....