JavaScriptBlender

Three.js / WebGL - прозрачная плоскость перекрывает пересекающиеся с ней элемнеты

В Three.js (WebGL) -  можно столкнуться с проблемой, когда прозрачная плоскость перекрывает пересекающиеся с ней элементы. Это происходит из-за того, что прозрачные поверхности не очень хорошо работают с z-буфером.

Данная проблема не является ошибкой, это стандартное поведение OpenGL (и, следовательно, WebGL).

Однако, проблема решается, тем, что у материала значение depthWrite - устанавливается в false.

Таким образом параметром depthWrite в Three.js можно отключить глубину при отрисовке 2d наложений.

Еще один способ решения этой проблему установить alphaTest материала в значение 0.5, либо пробовать изменять это значение.