threejs selbe Renderer in mehreren Leinwänden anzeigen

Question

Can Threejs Renderer rendert die gleiche Szene in mehreren Leinwänden, also möchte ich es einmal rendern und in zwei Leinwänden zeigen. Beachten Sie, dass ich es nicht zweimal rendern möchte, ich muss nur eine Leinwand in andere spiegeln. Vielen Dank.

Answer 1

Das ist ziemlich einfach und es beinhaltet keine three.js mehr, sondern einfach eine Leinwandausgabe auf eine andere Leinwand kopieren.

https://jsfiddle.net/VsWb9/5357/

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

aktualisieren

Hier ist eine Lösung mit einer besseren Leistung (für Chrome und Firefox, aber noch nicht Flanke):

1. Capture-Stream aus dem Canvas-Element des Drei

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

2. diesen Strom zu <video> ‚s Attribut src anhängen

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

Auf diese Weise müssen Sie nicht gespiegelte Elemente aktualisieren, nachdem jedes Bild machen. Sie werden automatisch auf dem Laufenden gehalten, wenn der Stream vom Quellbereich erfasst wird. Diese Lösung muss auf die obige Version für Browser zurückgesetzt werden, in der captureStream nicht verfügbar ist. Beispiel 100 zeigt Videoelemente reflektieren, was in Haupt-Threes Leinwand ist:

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