Question

当我们在场景中添加text-spites时，我们看到我们的透明平面隐藏了精灵，但并没有隐藏任何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,
        });

但似乎没有用。所以，对于那个考试，我在小提琴上写了一些代码，以找出问题所在： look fidddle example

Answer 1

three.js首先呈现不透明对象，然后呈现透明对象，最后呈现精灵。与其他对象一样，您的精灵受深度缓冲区的限制。

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

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

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

更新小提琴：https://jsfiddle.net/vyLc6roq/2/

three.js r.84

Three.js - 隐藏精灵的透明飞机

1 个答案: