three.js - 如何使用 A-Frame.js 声明 "mask" Material

Question

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

这需要一个移除了正方形的平面，然后将具有以下属性的 Material 应用于该平面:

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

有一个关于 Three.js here 的示例，但是我该如何使用 a-frame material syntax 来做到这一点？ ？

Answer 1

“面具”。

查看box-hole例如，为了创造幻觉，李创造了两个盒子。
1)“洞里”的盒子
2)一个稍大的无顶隐形盒子——用来遮盖第一个盒子。顶部被移除，作为一个“洞”，通过它你可以看到第一个盒子

如何在 THREE.js 中完成

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

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

docs声明该标志可用于创建隐藏其他对象的不可见对象。

如何在框架中完成

恐怕你不能简单地在框架中制作“斗篷” Material 。 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>

查看this 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