部分可见的被遮挡的精灵

Question

我想在屏幕截图上通过该应用重现一种行为。即当精灵被网格物体遮挡时，即使在前景中的网格物体后面，它仍然保持部分可见。 任何提示或提示如何在ThreeJS中实现？谢谢

Answer 1

有趣的问题。

这可以用单个精灵完成，但是您可能必须利用shaderMaterial（禁用depthTest并在顶点/片段着色器中进行检查，如果pixelCoordinate低于地面，然后将其透明化）。

如果您对此不熟悉，另一种方法是将子画面加倍。诀窍是将其中之一的depthTest设置为false。这样，即使精灵在地下，也可以渲染精灵。 （当它在地面之上时，它仍然被渲染在另一个精灵的顶部，但是它几乎是透明的，因此并不十分明显）。

我在这里举了一个小例子； https://jsfiddle.net/EthanHermsey/kw7dn8bh/25/

//create 2 sprites
let sprite = new THREE.Sprite(
    new THREE.SpriteMaterial({
    color: 'red'
  })
)
sprite.scale.setScalar( 0.5 );

let sprite2 = new THREE.Sprite(
    new THREE.SpriteMaterial({
    color: 'red',
    opacity: 0.2,
    transparent: true,
    depthTest: false
  })
)
sprite2.scale.setScalar( 0.5 );

//create a container for both sprites, add sprites to it.
spriteContainer = new THREE.Object3D();
spriteContainer.add(sprite)
spriteContainer.add(sprite2)
scene.add(spriteContainer);