Vẽ 2 cảnh trong cùng một khung hình - ba.js

Question

Tôi muốn có 2 cảnh với một camera được thêm vào mỗi ảnh và tôi muốn chúng được vẽ trong cùng một khung hình (nhưng không phải để chia canvas này). Tôi curently sử dụng 2 renderers vẽ trong cùng một yếu tố canvas, nhưng vấn đề của tôi là renderer thứ hai ghi đè lên đầu tiên vì vậy tôi chỉ nhìn thấy một trong 2 cảnh. Tôi đã thử alpha: true cho trình kết xuất và setClearColor(0x000000, 0); nhưng vẫn không có kết quả mong muốn.

Tôi muốn đạt được một hình ảnh trong hiệu ứng hình ảnh, nhưng tôi muốn "hình ảnh bên trong" được minh bạch (chỉ để vẽ các đối tượng, không phải là nền).

Điều đó có thể thực hiện với ba.js không?

cảm ơn

Answer 1

Nếu bạn có hai cảnh và bạn muốn tạo hiệu ứng ảnh trong ảnh, bạn có thể sử dụng mẫu sau. Đầu tiên thiết lập autoClear:

renderer.autoClear = false; // important! 

Sau đó, trong làm cho vòng lặp của bạn, sử dụng một mô hình như thế này:

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

Tôi nghĩ rằng một giải pháp tốt hơn sẽ được sử dụng kiểm tra cắt kéo. Về cơ bản, kiểm tra cắt kéo sẽ loại bỏ bất kỳ mảnh vỡ nào bên ngoài cửa sổ cắt kéo.

Phương pháp rõ ràng có thể trở nên khó chịu khi bạn sử dụng màu sắc rõ ràng, giá trị stencil, vv

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]); 
} 

Dưới đây là một ví dụ three.js trên các cổng đa view: link. Nó thể hiện cùng một cảnh, nhưng ý tưởng khá giống nhau. Nó đang sử dụng kiểm tra cắt kéo.