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

【问题标题】：threejs same renderer show in multiple canvasesthreejs 相同的渲染器在多个画布中显示
【发布时间】：2016-12-24 07:24:05
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

更新

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

从 Three 的画布元素中捕获流

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

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

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

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

【讨论】：