WebGLRenderer.setScissor is not rendering on the correct element

Questions
1

I’m displaying 12 div as a grid, 3 columns and 4 rows. And using renderer.setScissor to display 12 scenes on each of them, each scene has its own camera, controls. The problem is that, the scene which should be in the col1, row1 element displayed at col1, row4. And col1, row4, is at col1, row1. Also col1, row2 swapped with col1 row3. The same happend to col2, col3.

If I use 3 rows, then row1 and row3 is swapped, while row2 displayed correctly.

Here is the jsfiddle https://jsfiddle.net/hansen1416/Lw1a8bx9/85/. If you try to control the box at col1, row1. The box in the col1 row4 is moving.

I don’t understand where went wrong. Thanks for your help.

2

@YugoAmaryl46 –

If you replace (lines 108-109):

renderer.setScissor(left, top, width, height);
renderer.setViewport(left, top, width, height);

with:

var boxHeight = document.getElementById('box').clientHeight;
renderer.setScissor(left, boxHeight-bottom, width, height);
renderer.setViewport(left, boxHeight-bottom, width, height);

does it work as intended?

– Pavel

3

Amazing, it worked. Thanks man, you saved my day!