部分可见的被遮挡精灵

Question

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

Answer 1

有趣的问题。

它可以用单个精灵完成，但您可能必须使用 shaderMaterial（禁用 depthTest 并检查 vertex/fragment 着色器，如果像素坐标低于地面，然后将其渲染为透明）。

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

部分可见的被遮挡精灵

Partially visible occluded sprites

javascript

3d

sprite

three.js