複数のキャンバスに3つの同じレンダラーが表示される

Question

Threejsレンダラーは同じシーンを複数のキャンバスでレンダリングできますので、一度レンダリングして2つのキャンバスに表示します。私はそれを2度レンダリングしたくないことに注意してください。ちょうど1つのキャンバスを他のものに反映する必要があります。ありがとうございました。

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. キャプチャストリーム三つの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/