在three.js中切换画布/渲染目标

Question

我网页上有两个画布元素，我开始对其进行渲染：

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

3D场景以我期望的方式正确渲染。

但是，如果我尝试通过以下任一方式更改渲染器指向的画布元素：

renderer.domElement = mySecondCanvas;

或者

renderer.setRenderTarget({canvas:mySecondCanvas});

我在github上查看了文档，但setRenderTarget()的说明是TODO，很遗憾。 是否有可能切换渲染器正在使用的画布元素？如果可以，我该如何操作？目前我的尝试没有任何作用，只会使原始画布元素中的图像模糊，这可能是因为我同时调整了渲染器的大小：

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

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

- Daniel Robinson

Answer 1

很遗憾，这是由于WebGL工作原理所致，与Three.js无关。每个WebGL上下文（在Three.js中由WebGL渲染器表示）都绑定到一个画布元素，您无法更改WebGL上下文应呈现到哪个元素。

因此，请创建两个THREE.WebGLRenderers，分别用于每个画布元素。

- MikaelEmtinger

---

顺便提一下：渲染目标是你要进行渲染的纹理。 - MikaelEmtinger

谢谢，我本来就想这么做，那么我只需要在渲染器之间交换场景和相机来交换内容吗？还是只交换场景就可以了？此外，我应该在同一个requestAnimationFrame()中调用renderer1.render(scene1,camera1)和renderer2.render(scene2,camera2)，还是应该使用两个单独的requestAnimationFrame()调用呢？ - Daniel Robinson

您可以使用相同的requestAnimationLoop回调，没有问题。每个WebGL上下文可以被视为两个不同的内存块，它们不能相互访问，并且场景/场景对象/相机对象可能会添加指向特定内存块的属性，从而导致失败。我的直觉是场景中的对象（因此场景本身）最难重用，但相机应该是可重用的。 - MikaelEmtinger

Answer 2

这个帖子对我非常有帮助

看起来你不需要创建额外的画布或渲染器，而是使用具有自己场景和相机的附加渲染目标

- user3325025

---

链接失效，网页存档：https://web.archive.org/web/20220929105714/https://r105.threejsfundamentals.org/threejs/lessons/threejs-rendertargets.html - undefined