在 Three.js 中使用多个渲染器？

Question

我想在浏览器中使用两个 WebGL 渲染器（使用 Three.js）。我使用两个“div”元素完成了这项工作，每个元素都附加到两个不同的渲染器对象：

   <div id="ThreeJS1"...>
   <div id="ThreeJS1"...>
   ...
   renderer1 = new THREE.WebGLRenderer();
   renderer2 = new THREE.WebGLRenderer();
   ...
   container1 = document.getElementById( 'ThreeJS1' );
   container1.appendChild( renderer1.domElement );

   container2 = document.getElementById( 'ThreeJS2' );
   container2.appendChild( renderer2.domElement );
   ...

我按预期得到了两个渲染器显示，但问题是每个“div”中的对象都没有正确渲染，因为它们是黑色的，无论尝试改变它们的颜色还是使用线框。

我假设分割屏幕并使用多个渲染器可以使用单个渲染器的方法。我究竟做错了什么？感谢您对此提供的帮助。

Answer 1

它可能是第二个 div 的名称。如果放：

div id="ThreeJS1"... div id="ThreeJS2"... ...

代码不起作用？