如何使用 A-Frame.js 声明“遮罩”材质

Question

我正在尝试制作一个“墙上有洞”的场景。

这需要移除正方形的平面，然后将具有以下属性的材质应用于平面：

1. 对相机不可见
2. 隐藏其后面的任何其他对象，使其不被渲染

这里有一个使用 Three.js 的示例，但是我如何使用a-frame 材质语法来做到这一点？

Answer 1

面具”。

看一下盒孔示例，为了创造幻觉，Lee 创建了两个盒子。
1）“在洞里”的盒子
2）一个稍大的没有顶部的隐形盒子 - 用于遮盖第一个盒子。顶部被移除，作为一个“洞”，通过它你可以看到第一个盒子

如何在 THREE.js 中完成

隐藏是通过阻止第二个框呈现任何颜色来完成的。从李的例子来看：

 let material = new THREE.MeshBasicMaterial({
      colorWrite: false;
 })

文档指出，该标志可用于创建隐藏其他对象的不可见对象。

如何在框架中完成

恐怕你不能简单地在框架中制作“斗篷”材料。该colorWrite属性未在material组件中公开。

我认为最简单的方法是创建一个cloak组件，它将在 THREE.js 中创建第二个框：

AFRAME.registerComponent('cloak', {
    init: function() {
      let geometry = new THREE.BoxGeometry(1, 1, 1)
      geometry.faces.splice(4, 2) // cut out the top faces 
      let material = new THREE.MeshBasicMaterial({
         colorWrite: false
      })
      let mesh = new THREE.Mesh(geometry, material)
      mesh.scale.set(1.1, 1.1, 1.1)
      this.el.object3D.add(mesh)
    }
})

并像这样使用它：

<a-box material="src: myPic.png; side: back;" cloak>

在此 codepen中查看。使用 HIRO 标记，您应该得到如下所示的孔：

使用模型或其他物体作为“斗篷”

在这里，我们需要将colorWrite=false魔法应用于模型的每个节点/子节点。

init: function() {
  // make sure the model is loaded first
  this.el.addEventListener('model-loaded', e=>{
    let mesh = this.el.getObject3D('mesh') // grab the mesh
    if (mesh === undefined) return;        // return if no mesh :(
    mesh.traverse(function(node) {         // traverse through and apply settings
      if (node.isMesh && node.material) {  // make sure the element can be a cloak
        node.material.colorWrite = false
        node.material.needsUpdate = true;
      }
    });
  })
}

还要确保斗篷在需要斗篷的元素之前渲染：

<a-marker>
  <a-entity gltf-model="#wall-with-a-hole" cloak-component></a-entity>
  <!-- the other stuff that needs to be cloaked-->
</a-marker