three.js中plane透明部分背后的物体变全透明的问题及解决方法

问题描述

最近在使用three.js做一个3D场景的项目，遇到了一个比较奇怪的问题。我使用了一个planeGeometry作为一个平面，然后设置了一个meshBasicMaterial，使用了一个png图片作为纹理贴图，设置了meshBasicMaterial的map属性。由于png图片有透明的部分，我还设置了meshBasicMaterial的transparent属性为true，这样就可以让plane的透明部分不显示。

但是，当我把这个plane放到场景中，发现了一个奇怪的现象：plane透明的部分背后的其他物体变成了全透明的，就像是被plane遮挡住了一样。这显然不是我想要的效果，我想要的是plane透明的部分能够看到背后的物体，而不是让它们消失。

问题原因

根据我从网络上搜索到的信息，这个问题可能是由于深度排序的问题导致的1。深度排序是指three.js在渲染场景中的物体时，会根据物体的距离来决定渲染的顺序，距离相机近的物体会先渲染，距离相机远的物体会后渲染2。这样可以避免一些不必要的渲染，提高性能。