javascript - 在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);

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

Answer 1

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

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