Javascript WebGL Three.js重复内容

我有一个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>

---

有可能，看看这个例子。您只需设置相同的摄像头，而不是四个不同的摄像头：

---

您还需要什么吗？

谢谢您的回答。我已经看过这个例子，但我不认为这是我试图做的，因为在这个例子中，一切都在一个画布元素中。我想有2个不同的div元素，它们在我的页面上的不同位置，具有完全相同的动画。例如，我想在页面顶部有一个大的动画div。然后在动画下应该有一些文本，如果你将页面滚动到底部，应该会有另一个较小的div，与页面顶部的大div具有相同的动画（摄像头）。你想让一个WebGL元素在网站上的不同div元素中有多个，对吗？您只需将WebGL渲染器放入多个div。在codepen.io上基本相同，在每个预览DIV上都是WebGL的东西。

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);