WebGL Three.js 중복 콘텐츠

Question

WebGL 콘텐츠가있는 웹 사이트가 있습니다. 이를 위해 WebGL을 보여주기위한 div 요소가 있습니다.

이제 동일한 페이지의 여러 div에서이 콘텐츠를 가져 오려고합니다. 내용은 정확히 동일해야합니다. 가능한 경우 모든 div에 애니메이션이 표시되어야합니다.

두 번째 렌더러를 만들려고 시도하고 두 번째 div에 추가하려고 시도했지만 작동하지 않는 것 같습니다.

동일한 페이지의 여러 div에서 동일한 WebGL 콘텐츠를 가져 오려면 어떻게해야합니까?

이것은 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> 

편집 : 나는 두 번째 div 요소로 렌더링을 추가하는 시도 만 이상의 장면이 모두 마지막 추가 된 div 요소에 표시하지 . 이것은 내가 시도한 코드입니다. 간단한 예제는 왼쪽 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

당신이 뭔가 더 필요 했습니까?