如何掩盖另一个透明物体后面的物体？

Question

我想设置一个 a-frame AR 场景，您可以在其中通过桌子上的一个洞看到一个物体。我在 Cinema 4D 中构建了一个顶部有孔的盒子，现在我需要一种透明但不渲染背后物体的材质。有什么想法吗？

干杯，可以

Answer 1

此外，如果您想将 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;
      }
    });
  }
});

// 你的框架模型是?

<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>

         

Answer 2

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

<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。处理这个问题的方法（我在玩简单的.png 文件时偶然发现了它），将设置 alpha 测试值：material="alphaTest: 0.5"。喜欢here。