Question

我想设置一个A帧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;
      }
    });
  }
});

// 你的 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>

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。

如何遮蔽另一个透明对象后面的对象？

2 个答案: