部分可见的被遮挡精灵

Question

我想在屏幕截图上重现应用程序的行为。 即当精灵被网格遮挡时，它保持部分可见，即使它现在位于前景中的网格后面。 任何提示或提示如何在 ThreeJS 中实现这一点？ 谢谢

Answer 1

有趣的问题。

它可以使用单个精灵完成，但您可能必须使用着色器材料（如果 pixelCoordinate 低于地平面，则禁用 depthTest 并检查顶点/片段着色器，然后将其渲染为透明）。

如果您对此不熟悉，另一种方法是将精灵加倍。 诀窍是将其中之一的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);