Нарисуйте 2 сцены в том же холсте - three.js

Question

Я хочу, чтобы у меня было 2 сцены с добавленной камерой, и я хочу, чтобы они были покрашены в один и тот же холст (но не для того, чтобы разделить этот холст). Я использую 2 рендерера, которые рисуют в одном и том же элементе canvas, но моя проблема в том, что второй рендеринг перезаписывает первый, поэтому я вижу только одну из двух сцен. Я попробовал alpha: true для рендера и setClearColor(0x000000, 0);, но все еще не желаемого результата.

Я хочу добиться изображения в эффекте изображения, но я хочу, чтобы «внутренняя картина» была прозрачной (только для рисования объектов, а не для фона).

Возможно ли это с помощью трёх.js?

благодаря

Answer 1

Если у вас есть две сцены, и вы хотите, чтобы создать эффект картинка в картинке, вы можете использовать следующий шаблон. Первый набор autoClear:

renderer.autoClear = false; // important! 

Затем в цикле рендеринга, использовать шаблон, как этот:

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

Я думаю, что лучшим решением было бы использовать ножничный тест. В основном, ножничный тест отбрасывает любые фрагменты за пределами окна ножницы.

Прозрачный метод может стать противно, когда вы используете ясный цвет, значение трафарета и т.д.

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

Вот Three.js примера на несколько портов зрения: link. Это рендеринг одной и той же сцены, но идея довольно похожа. Он использует ножничный тест.