Canvas 三个相同的渲染器在多个画布中显示

Threejs渲染器可以在多个画布中渲染同一场景，所以我想渲染一次并在两个画布中显示它。注意，我不想渲染两次，我只需要将一个画布反射到另一个画布上。谢谢。

这很简单，不再涉及三个.js，只需将一个画布输出复制到另一个画布

更新

以下是一个性能更好的解决方案（适用于Chrome和Firefox，但还不适用于Edge）：

从三个人的画布元素捕获流

dataUrl = URL.createObjectURL(renderer.domElement.captureStream(45));

将该流附加到

的src属性

pip = document.createElement('video');
pip.style.width = pip.style.height = '200px';
document.body.appendChild(pip);
pip.src = dataUrl;
pip.play();

这样，您就不必在每次帧渲染后刷新镜像元素。它们将自动更新从源画布捕获的流。对于

captureStream

不可用的浏览器，此解决方案需要回退到上述版本。示例显示了100个反映main Three画布内容的视频元素：

---

谢谢你，Pawel，你能告诉我，它会改变fps速率吗？@Gor这取决于拷贝数和它们的分辨率。两份不会有多大影响，但100份会有多大影响。也可以看到我的更新。它展示了如何拥有画布的多个副本，而无需手动刷新。非常感谢Pawel

pip = document.createElement('video');
pip.style.width = pip.style.height = '200px';
document.body.appendChild(pip);
pip.src = dataUrl;
pip.play();