三個相同的渲染器在多個畫布中顯示

Question

三個渲染器可以在多個畫布中渲染相同的場景，所以我想渲染一次並在兩個畫布中顯示它。請注意，我不想渲染它兩次，我只需要將一個畫布反射到其他畫布。謝謝。

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，但不是邊緣還）：從三的canvas元素

1. 捕獲流

   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/