threejs-то же рендеринговое шоу в нескольких холстах

Question

Может ли рендеринг Threejs сделать одну сцену на нескольких холстах, поэтому я хочу сделать один раз и показать его на двух холстах. Обратите внимание, что я не хочу отображать его дважды, мне просто нужно отразить один холст в другом. Спасибо.

Answer 1

Это довольно просто, и это больше не связано с tr.js, но просто копирует один вывод 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); 

Update

Вот решение с более высокой производительностью (для Chrome и Firefox, но еще не край):

1. Захват поток из холста элемента в три в

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

2. Приложите этот поток в <video> «s 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/