javascript - WebGL Three.js 重复内容

Question

我有一个包含 WebGL 内容的网站。为此，我有一个 div 元素用于显示 WebGL。

现在我试图在同一页面的多个 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

您还需要更多东西吗？