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

【问题标题】：switching canvas / rendertarget in three.js在three.js中切换画布/渲染目标
【发布时间】：2012-05-20 14:03:07
【问题描述】：

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

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

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

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

renderer.domElement = mySecondCanvas;

或

renderer.setRenderTarget({canvas:mySecondCanvas});

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

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

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

【问题讨论】：

【解决方案1】：

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

所以：制作两个 THREE.WebGLRenderer，每个画布元素一个。

【讨论】：

顺便说一句：渲染目标是您渲染到的纹理。
谢谢，我想我可能不得不这样做，所以我只是在渲染器之间交换场景和相机来交换内容，还是只交换场景就可以了。我也应该在同一个 requestAnimationFrame() 中调用 renderer1.render(scene1,camera1) 和 renderer2.render(scene2,camera2) 还是应该对 requestAnimationFrame 使用两个单独的调用？
可以使用同一个requestAnimationLoop回调，没问题。每个 WebGL 上下文都可以被视为两个不同的内存块，它们无法相互访问，并且可能会将属性添加到场景/场景对象/相机对象中，这些属性引用特定的内存块并因此失败。我的直觉是场景中的物体（以及场景本身）是最难重用的，但相机应该是可重用的。