Three.js 如何申报；面具；使用A-Frame.js的材质

我想制造一个“墙上有个洞”的场景。

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

照相机看不见

隐藏任何其他对象，使其不被渲染

在three.js中有一个例子，但是如何使用？

面具呢。 看这个例子，为了创造错觉，Lee创建了两个盒子
1） “在洞里”的盒子
2） 一个稍微大一点的隐形盒子，没有顶盖，用来遮盖第一个盒子。顶部被移除作为一个“孔”，通过它你可以看到第一个盒子

如何在THREE.js中完成 通过防止第二个长方体渲染任何颜色来完成掩蔽。从李的例子来看：

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

该标志可用于创建隐藏其他标志的不可见对象的状态

如何在a型架中完成 恐怕你不能简单地把“斗篷”材料做成a型架。

colorWrite

属性未显示在

材质

组件中

我认为最简单的方法是——创建一个

clope

组件，它将在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>

还要确保在需要掩蔽的元素之前渲染掩蔽：

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

“面具”。
看这个例子，为了创造错觉，Lee创建了两个盒子

1） “在洞里”的盒子

2） 一个稍微大一点的隐形盒子，没有顶盖，用来遮盖第一个盒子。顶部被移除作为一个“孔”，通过它你可以看到第一个盒子

如何在THREE.js中完成
通过防止第二个长方体渲染任何颜色来完成掩蔽。从李的例子来看：

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

该标志可用于创建隐藏其他标志的不可见对象的状态

如何在a型架中完成
恐怕你不能简单地把“斗篷”材料做成a型架。
colorWrite
属性未显示在
材质
组件中

我认为最简单的方法是——创建一个
clope
组件，它将在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>

还要确保在需要掩蔽的元素之前渲染掩蔽：

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


谢谢，这太好了。根据我的需要，最好将“斗篷”参数添加到
并将
colorWrite:false
应用到整个对象。这可能吗？嗨，我不知道你想实现什么，这些有帮助吗：，我有一个3D模型，就像：
，我只是想把斗篷材料应用到它上。似乎无法让它工作：/你能提供一个小故障，或git-repo吗？当然：有一个带有“窗口”的飞机模型，我想把它当作斗篷。如果您查看资产，我已经添加了正在使用的自定义标记。谢谢，这很好。根据我的需要，最好将“斗篷”参数添加到
中，并将
colorWrite:false
应用到整个对象。这可能吗？嗨，我不知道你想实现什么，这些有帮助吗：，我有一个3D模型，就像：
，我只是想把斗篷材料应用到它上。似乎无法让它工作：/你能提供一个小故障，或git-repo吗？当然：有一个带有“窗口”的飞机模型，我想把它当作斗篷。如果您查看资产，我已经添加了正在使用的自定义标记。