I am currently working on a Website that features WebGL content. I have successfully implemented a div element to showcase the WebGL.
Now, my goal is to display this content in multiple divs on the same page, with identical animations across all divs. However, my attempts at creating a second renderer and adding it to another div have been unsuccessful.
Is there a way for me to show the same WebGL content in multiple divs on the same page?
The code snippet below shows how I set up the WebGL content. My attempt to append the renderer to a second div did not yield the desired results.
<div id="WebGLCanvas"/>
<script>
// WebGL content creation code here
</script>
EDIT: After trying to add the renderer to a second div element, the scene only appears on the last added div element rather than both. Below is the code snippet illustrating my attempt to have the same content displayed on two separate div elements, with synchronized movements.
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);