WebGL Three.js дублирующийся контент

Question

У меня есть сайт с содержимым WebGL. Для этого у меня есть div-элемент для показа WebGL.

Теперь я пытаюсь получить этот контент в нескольких div на той же странице. Содержимое должно быть точно таким же. Если возможно, анимация должна отображаться во всех div.

Я попытался создать второй рендер и попытался добавить это ко второму div, но это, похоже, не сработает.

Как я могу получить одно и то же содержимое WebGL в нескольких div на одной странице?

Это мой код для создания содержимого WebGL. renderer1 была моей попыткой добавить к второму div, но это не сработало.

<div id="WebGLCanvas"/> 
     <script> 
     var scene; 
     var camera; 
     var controls; 
     var geometryArray; 

     initializeScene(); 

     animateScene(); 

     function initializeScene(){ 
      if(!Detector.webgl){ 
       Detector.addGetWebGLMessage(); 
       return; 
      } 

      renderer = new THREE.WebGLRenderer({antialias:true}); 
      renderer.setClearColorHex(0x000000, 1); 
      renderer1 = new THREE.WebGLRenderer({antialias:true}); 
      renderer1.setClearColorHex(0x000000, 1); 

      canvasWidth = window.innerWidth; 
      canvasHeight = window.innerHeight; 

      renderer.setSize(canvasWidth, canvasHeight); 

      renderer1.setSize(canvasWidth, canvasHeight); 

      document.getElementById("WebGLCanvas").appendChild(renderer.domElement); 

      scene = new THREE.Scene(); 

      camera = new THREE.PerspectiveCamera(45, canvasWidth/canvasHeight, 1, 100); 
      camera.position.set(0, 0, 6); 
      camera.lookAt(scene.position); 
      scene.add(camera); 

      controls = new THREE.TrackballControls(camera, renderer.domElement); 

      axisSystem = new AxisSystem(camera, controls); 

      geometryArray = new Object(); 
      var loader = new THREE.JSONLoader(); 
      for(var i = 0; i < jsonFileNames.length; i++){ 
       var layerName = jsonFileNames[i].split("/")[2].split(".")[0]; 
       loader.load(jsonFileNames[i], function(geometry, layerName){ 
        mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({vertexColors: THREE.FaceColors})); 
        mesh.scale.set(0.003, 0.003, 0.003); 
        mesh.doubleSided = true; 
        scene.add(mesh); 
        geometryArray[layerName] = mesh; 
       }, layerName); 
      } 

      var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); 
      directionalLight.position = camera.position; 
      scene.add(directionalLight); 
     } 

     function animateScene(){ 
      controls.update(); 
      axisSystem.animate(); 
      requestAnimationFrame(animateScene); 
      renderScene(); 
     } 

     function renderScene(){ 
      renderer.render(scene, camera); 
      axisSystem.render(); 
     } 


    </script> 

EDIT: Я пытался добавить визуализатор ко второму сНу элемента, но на последней добавленной сНу элемента появляется сцена, чем только и не на обоих. Это код, который я пробовал. Простым примером того, что я пытаюсь, является то, что я хочу левый элемент div и правый элемент div. На обоих я хочу один и тот же контент. Это означает, что если я перемещаю 3D-объект на свой левый элемент, он также должен перемещаться по правому элементу.

container = document.getElementById("webglcanvas"); 
container2 = document.getElementById("webglcanvas2"); 
containerWidth = container.clientWidth; 
containerHeight = container.clientHeight; 
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); 
renderer.setSize(containerWidth, containerHeight); 
container.appendChild(renderer.domElement); 
container2.appendChild(renderer.domElement); 

Answer 1

Возможно, взгляните на этот пример. Вы просто должны установить ту же камеру, не четыре разных:

http://stemkoski.github.io/Three.js/Viewports-Quad.html

ли вам нужно что-то еще?