如何在自定义A-Frame组件中获取所属实体的材质定义

嘿，我完全懂你的需求——不想给自定义组件加一堆材质相关的参数，就想让它直接复用所属实体上的material组件配置，对吧？这确实是自定义组件时很常见的场景，咱们来搞定它。

问题的核心在于：你手动创建的THREE.Mesh并不会自动关联到实体上的material组件，得主动去获取并应用这个材质实例。下面是具体的解决步骤和修改后的代码：

1. 等待material组件初始化并获取材质 #

A-Frame的组件加载顺序不一定，所以咱们要确保在material组件完全初始化后再去拿它的材质对象。可以用waitForComponent方法来做这件事，它会返回一个Promise，等目标组件就绪后再执行后续逻辑。

2. 监听材质变化（可选但很实用） #

如果之后用户修改了实体的material属性（比如动态改颜色），咱们的组件也应该同步更新，所以需要监听componentchanged事件。

修改后的完整组件代码 #

AFRAME.registerComponent('square', {
  schema: {
    size: { type: 'number' }
  },
  init: function () {
    const sizeOffset = this.data.size / 2;
    const points = [];
    points.push(new THREE.Vector2(-sizeOffset, -sizeOffset));
    points.push(new THREE.Vector2(sizeOffset, -sizeOffset));
    points.push(new THREE.Vector2(sizeOffset, sizeOffset));
    points.push(new THREE.Vector2(-sizeOffset, sizeOffset));

    var shape = new THREE.Shape(points);
    var geometry = new THREE.ShapeGeometry(shape);
    this.mesh = new THREE.Mesh(geometry); // 把mesh存到组件实例里，方便后续更新
    this.el.object3D.add(this.mesh);

    // 等待material组件就绪，然后应用材质
    this.el.waitForComponent('material').then(() => {
      this.updateMaterial();
      // 监听材质变化，实时更新
      this.el.addEventListener('componentchanged', (evt) => {
        if (evt.detail.name === 'material') {
          this.updateMaterial();
        }
      });
    });

    // 处理没有material组件的情况，加个默认材质
    if (!this.el.components.material) {
      this.mesh.material = new THREE.MeshBasicMaterial({ color: '#ffffff' });
    }
  },
  // 抽离更新材质的方法，方便复用
  updateMaterial: function () {
    this.mesh.material = this.el.components.material.material;
  }
});

关键代码解释 #

• this.el.waitForComponent('material')：确保我们在material组件完全初始化后再获取材质，避免拿到undefined。
• this.el.components.material.material：这就是实体上material组件生成的THREE.js材质实例，直接赋值给你的mesh就行。
• componentchanged事件监听：当用户修改material的任何属性（比如color、opacity）时，都会触发这个事件，咱们调用updateMaterial就能同步更新mesh的材质。
• 默认材质处理：如果实体没有设置material组件，给个白色材质兜底，避免出现黑色或者错误。

现在你再运行代码，那个绿色的square就会正确显示绿色了，而且之后如果动态修改实体的material属性，比如：

document.querySelector('[square]').setAttribute('material', 'color', 'blue');

你的square也会自动变成蓝色，完全不用修改组件代码，保持了组件的通用性~

备注：内容来源于stack exchange，提问作者Rich S