title: WebGL Three.js duplicate content
body: <p>I have a Website with WebGL content. For this I have a div-element for showing the WebGL.</p>
  
  <p>Now I am trying to get this content in multiple divs on the same page. The content should be exactly the same. If it is possible the animation should be shown on all divs.</p>
  
  <p>I have tried to create a second renderer and tried to add this to the second div but this seems not to work.</p>
  
  <p>How can I get the same WebGL content in multiple divs on the same page?</p>
  
  <p>This is my code for creating the WebGL content. renderer1 was my try to append to the second div but this didnt work.</p>
  
  <pre><code>&lt;div id="WebGLCanvas"/&gt;
          &lt;script&gt;
          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 &lt; 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();
          }
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>EDIT:
  I have tried to add the renderer to a second div element but the scene than only appears on the last added div element and not on both.
  This is the code I have tried. A simple example of what I am trying is that I want a left div element and a right div element. On both I want the same content. That means if I move the 3D object on my left element it should also move on the right element.</p>
  
  <pre><code>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);
  </code></pre>