在 Three.js 中切换 canvas / rendertarget

Question

我的页面上有两个画布元素，我开始渲染到我的：

new THREE.WebGLRenderer({canvas:myFirstCanvas});

并且 3D 场景按照我的预期正确渲染

但是如果我尝试使用以下任一方法更改渲染器指向的画布元素：

renderer.domElement = mySecondCanvas;

或者

renderer.setRenderTarget({canvas:mySecondCanvas});

我查看了 github 上的文档，但不幸的是 setRenderTarget() 说 TODO 。是否可以切换渲染器正在使用的画布元素？如果是这样我该怎么办？目前我的尝试除了模糊原始画布元素中的图像之外什么也没做，大概是因为我还使用以下方法调整了渲染器的大小：

renderer.setSize(mySecondCanvas.width,mySecondCanvas.height);

当我尝试切换到另一个画布时。

Answer 1

不幸的是，这是由于 hon WebGL 工作造成的，与 Three.js 细节无关，但每个 WebGL 上下文（在由 WebGL 渲染器表示的 Three.js 中）都绑定到一个 canvas 元素，并且您无法更改哪个元素WebGL 上下文应该渲染到。

因此：创建两个 THREE.WebGLRenderer，每个画布元素一个。