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

Question

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

Answer 1

这非常简单，它不再涉及three.js，只是简单地将一个画布输出复制到另一个画布。

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's 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();
   

这样，您不必在每次渲染帧后刷新镜像元素。它们将自动跟踪从源画布捕获的流的最新信息。对于captureStream不可用的浏览器，此解决方案需要回退到上述版本。显示100个视频元素的示例，反映了主要三个画布中的内容：

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