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

threejs same renderer show in multiple canvases

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

这很简单，不再涉及 three.js，只是将一个 canvas 输出复制到另一个 canvas。

https://jsfiddle.net/VsWb9/5357/

    // copy source canvas to the other canvas after each render iteration
    pipctx.drawImage(renderer.domElement, 0, 0, 200, 200);

更新

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

  1. 从 Three 的 canvas 元素捕获流

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

  2. 将该流附加到 <video> 的 src 属性

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

这样您就不必在每一帧渲染后都刷新镜像元素。他们将自动与从源 canvas 捕获的流保持同步。对于 captureStream 不可用的浏览器，此解决方案将需要回退到上述版本。显示 100 个视频元素的示例，反映了主要三部曲的内容 canvas:

https://jsfiddle.net/VsWb9/5359/