如何屏蔽掉另一个透明物体后面的物体？

Question

我想设置一个单帧 AR 场景，您可以在其中通过 table 中的孔看到物体。我在 Cinema 4D 中构建了一个顶部有孔的盒子，现在我需要一个 material 透明但不渲染后面的对象。有什么想法吗？

干杯，可以

Answer 1

一个巧妙的技巧是利用渲染顺序。使用这样的设置：

<a-box position="-1 0.5 -3" material="transparent: true;"></a-box>

<!--- this one will mask all following objects ---!>
<a-plane position="0 1.3 -1" material="transparent: true; opacity: 0.2;"></a-plane>

<!--- the sphere won't be visible behind the transparent plane ---!>
<a-sphere position="0 1.25 -5" material="transparent: true;"></a-sphere>

球体在飞机后面是不可见的。

看看here. The way of dealing with this (i stumbled upon it while playing with simple .png files), would be setting the alpha-test value: material="alphaTest: 0.5". Like here。

Answer 2

此外，如果您想将 GLTF/GLB 模型隐藏在平面后面，因为 material="opacity" 仅适用于基元，那么我建议您也包括在您的脚本中添加此组件并将其附加到您的模型：

  AFRAME.registerComponent('model-opacity', {
  schema: {default: 1.0},
  init: function () {
    this.el.addEventListener('model-loaded', this.update.bind(this));
  },
  update: function () {
    var mesh = this.el.getObject3D('mesh');
    var data = this.data;
    if (!mesh) { return; }
    mesh.traverse(function (node) {
      if (node.isMesh) {
        node.material.opacity = 1;
        node.material.transparent = true;
        node.material.needsUpdate = true;
      }
    });
  }
});

// 您的 AFRAME 样机将是

<a-box position="-1 0.5 -3" material="transparent: true;"></a-box>

<!--- this one will mask all following objects ---!>
<a-plane position=".2 0 0" rotation="0 180 0" material="transparent: true; opacity: 0.2;"></a-plane>

     <a-entity id="model"
                gltf-model="#3Dmodel"
                rotation="0 0 0"
                scale=".8 .8 .8"
                position="0 -1 .4"
                model-opacity>

<!--- the sphere won't be visible behind the transparent plane ---!>
<a-sphere position="0 1.25 -5" material="transparent: true;"></a-sphere>

如何屏蔽掉另一个透明物体后面的物体？

How to mask out an object behind another transparent object?

augmented-reality

aframe