Three.js-隐藏精灵的透明平面

当我们在场景中添加文本时，我们看到透明平面隐藏精灵，但不隐藏任何3d对象。 这是为什么？如何使精灵在透明平面下可见？

看

我的飞机是：

// transparent plane
geometry = new THREE.PlaneGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
            color: 0xa6cfe2,
            side: THREE.DoubleSide,
            transparent: true,
            opacity: 0.5,
            depthFunc: THREE.LessDepth,
        });

但这似乎不管用。 因此，对于那个例子，我在fiddle上写了一些代码来解决这个问题：

---

three.js首先渲染不透明对象，然后渲染透明对象

可以使用此模式防止透明对象写入深度缓冲区：

// transparent plane
geometry = new THREE.PlaneBufferGeometry( 200, 200, 1, 1 );

material = new THREE.MeshBasicMaterial( {
    color: 0xa6cfe2,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5,
    depthWrite: false
} );

---

three.js r.112

我也检查了堆栈并找到了sprites（）的示例，但我认为这对我的项目（链接到它）不好，因为：-我们有超过15个sprites，我们必须将其放置在轴上；-我们像camera.set（x，y，z）一样改变相机的位置，如果我们要制作两个相机和两个场景（对于精灵和另一个），我们必须将所有位置从第一个场景发送到第二个场景（15个精灵+旋转…）这并不是我想要得到帮助，我只需要在透明平面下绘制精灵，并将其保存为可见“在透明的平面下”，而不是在平面后面。就像红色立方体。太棒了！！！这解决了一个我几乎放弃的问题。谢谢！