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

switching canvas / rendertarget in three.js

本文关键字：目标 js 三个      更新时间：2023-09-26

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

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

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

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

renderer.domElement = mySecondCanvas;

或

renderer.setRenderTarget({canvas:mySecondCanvas});

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

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

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

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

所以：做两个三个。WebGLRenderers，每个画布元素一个。

这篇文章对我真的很有帮助

看起来您不必创建额外的

画布或渲染器，而是使用自己的场景和相机创建额外的渲染目标

相关文章：