Rysuj 2 sceny na tym samym płótnie - trzy.js

Question

Chcę mieć 2 sceny z kamerą dodaną do każdej z nich i chcę, aby były one malowane w tym samym obszarze roboczym (ale nie w celu podzielenia tego płótna). Obecnie używam 2 renderers, które malują w tym samym elemencie canvas, ale moim problemem jest, że drugi renderer nadpisuje pierwszy, więc widzę tylko jedną z 2 scen. Próbowałem alpha: true dla renderer i setClearColor(0x000000, 0);, ale nadal nie ma pożądanego rezultatu.

Chcę uzyskać efekt obrazu w obrazie, ale chcę, aby "obraz wewnątrz" był przezroczysty (tylko do malowania obiektów, a nie tła).

Czy to możliwe z plikiem three.js?

dzięki

Answer 1

Jeśli masz dwie sceny, a chcesz uzyskać efekt obrazu w obrazie, można użyć następującego wzoru. Pierwszy set autoClear:

renderer.autoClear = false; // important! 

Następnie w pętli renderowania, należy użyć wzoru jak ten:

renderer.clear(); 
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight); 
renderer.render(scene, camera); 

renderer.clearDepth(); // important! clear the depth buffer 
renderer.setViewport(10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight); 
renderer.render(scene2, camera); 

Three.js r.71

Answer 2

Myślę, że lepszym rozwiązaniem byłoby wykorzystanie test nożycowy. Zasadniczo test nożyczek odrzuci wszystkie fragmenty poza oknem nożycowym.

Klarowny metoda może stać się nieprzyjemny podczas korzystania z jasną barwę, wartości stencil itp

for (...) { 
    // init left, bottom, etc. with viewport info 

    renderer.setViewport(left, bottom, width, height); 
    renderer.setScissor(left, bottom, width, height); 
    renderer.setScissorTest(true); 

    renderer.render(scene[i], camera[i]); 
} 

Oto Three.js przykład na wielu portach Widok: link. Renderuje tę samą scenę, ale pomysł jest podobny. Używa testu nożyczek.