Обеспечение того, чтобы тонкие экземпляры сетки всегда были видимы в Three.js. ⇐ Javascript

[Anonymous]

Я создаю тепловую карту с помощью Three.js, которая имеет 19 строк и около 6000 столбцов. Поскольку столбцов очень много, каждая ячейка очень тонкая. Из >110 000 ячеек в моем текущем наборе данных 47 окрашены в красный цвет, что представляет особый интерес. Большинство этих ячеек видимы, но есть три, которые полностью невидимы, пока вы не увеличите масштаб или не примените какую-либо анимацию, которая увеличивает их (они снова исчезают при уменьшении масштаба или возврате их к исходному размеру).
Ячейки генерируются с использованием трех экземпляров сетки,

Код: Выделить всё

const cellWidth = width / nCols;
const apparentCellWidth = cellWidth*1.01;
const cellHeight = height / nRows;

const cellGeometry = new THREE.PlaneGeometry(apparentCellWidth, cellHeight);

const redMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const greyMaterial = new THREE.MeshBasicMaterial({ color: 0xc7c8c9 });
const whiteMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });

let redMesh = new THREE.InstancedMesh(cellGeometry, redMaterial, redCount);
let greyMesh = new THREE.InstancedMesh(cellGeometry, greyMaterial, greyCount);
let whiteMesh = new THREE.InstancedMesh(cellGeometry, whiteMaterial, whiteCount);

const heatmapGroup = new THREE.Group();
heatmapGroup.add(redMesh);
heatmapGroup.add(greyMesh);
heatmapGroup.add(whiteMesh);

scene.add(heatmapGroup);

Есть ли способ предоставить RedMesh приоритетный режим, чтобы он всегда отображался?
Я уже пробовал следующее, но безрезультатно< /p>

Код: Выделить всё

redMesh.renderOrder = 999;
redMesh.material.depthTest = false;
redMesh.material.depthWrite = false;
redMesh.onBeforeRender = function (renderer) { renderer.clearDepth(); };

Ранее у меня была проблема с вертикальными промежутками между некоторыми столбцами. Мое решение заключалось в том, чтобы вычислить позиции ячеек с помощью cellWidth, но нарисовать их с шириной, которая на 1% шире видимостиCellWidth. Я подозреваю, что эти проблемы могут быть связаны друг с другом.


Подробнее здесь: https://stackoverflow.com/questions/793 ... n-three-js