events - a-frame 中的 gltf DOM 事件

Question

我无法在框架中的 gltf 模型中捕获“点击”事件。这是代码。A-frame 文档显示仅支持两个事件。即“模型加载”和“模型错误”。我们如何支持其他事件，例如“Click”和“mouseenter”？

AFRAME.registerComponent('material-displacement', {
  /**

  */
  init: function () {
    this.material  = new THREE.MeshStandardMaterial({color: "green"});
    this.el.addEventListener('model-loaded', () => { this.update(); });
  },

  /**
   * Apply the material to the current entity.
   */
  update: function () {
    const mesh = this.el.getObject3D('mesh');
    if (mesh) {
      mesh.traverse((node) => {
        if (node.isMesh) node.material = this.material;
      });
    }
  },   

});

Answer 1

您可以按照自己的想法实施它们。而不是让事件侦听器侦听模型加载的事件，而是让它侦听 click 或 mouseenter 事件。

所以改变这一行

this.el.addEventListener('model-loaded', () => { this.update(); });

到这条线

this.el.addEventListener('click', () => { this.update(); });