AFrame程序化创建Canvas纹理平面网格：纹理重复问题求助

你遇到的纹理混乱问题，核心原因其实很明确：

1. Canvas ID重复：你用Date.now()生成Canvas的ID，但循环执行速度极快，短时间内多个Canvas会拿到完全相同的时间戳，导致多个a-entity的material引用了同一个Canvas元素，自然就出现了纹理复用的混乱情况。
2. 直接传递Canvas对象的潜在竞态：在第一种方案中，虽然直接传递Canvas对象，但AFrame 0.8.0在快速批量创建纹理时，可能因为内部缓存或异步处理的竞态条件，导致纹理没有正确绑定到对应的平面。

解决方案：用唯一标识绑定纹理 #

最简单有效的修复方式是用循环变量i生成绝对唯一的Canvas ID，彻底避免重复。同时确保每个Canvas的纹理被正确关联到对应的平面。

修正后的完整代码

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('grid', {
  schema: {
    across: {type: 'int', default: 3},
    down: {type: 'int', default: 3},
  },
  init() {
    const data = this.data;
    const across = data.across;
    const down = data.down;
    const needed = across * down;
    
    for (let i = 0; i < needed; ++i) {
      const canvas = document.createElement('canvas');
      canvas.width = 256;
      canvas.height = 256;
      // 用循环变量i生成唯一ID，彻底避免重复
      canvas.id = `c${i}`;
      document.body.appendChild(canvas);
      
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = `hsl(${i / needed * 360 | 0}deg,100%,50%)`;
      ctx.fillRect(0, 0, 256, 256);
      ctx.fillStyle = 'black';
      ctx.font = '200px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(i, 128, 128);
      
      const elem = document.createElement('a-entity');
      elem.setAttribute('geometry', {
        primitive: 'plane',
        height: 1,
        width: 1,
      });
      // 通过唯一ID引用Canvas，确保纹理绑定准确
      elem.setAttribute('material', {
        shader: 'flat',
        src: `#${canvas.id}`,
      });
      
      this.el.appendChild(elem);
      
      const x = i % across;
      const y = Math.floor(i / across);
      const u = x / (across - 1);
      const v = y / (down - 1);
      const px = across * (u - .5);
      const py = down * (v - .5);
      const pz = 0;
      elem.setAttribute('position', {x: px, y: py, z: pz});
    }
  },
});
</script>
<a-scene>
  <a-entity grid position="0 1.5 -4"></a-entity>
</a-scene>

关键修改点说明 #

• 唯一ID生成：把canvas.id = c${Date.now()}改成`canvas.id = `c${i}，利用循环变量i的天然唯一性，确保每个Canvas都有专属标识，从根源解决ID重复问题。
• 代码可读性优化：将y = i / across | 0替换为y = Math.floor(i / across)，功能完全一致，但代码更易读。
• 清理无效代码：删除了一行多余的ctx.fillStyle设置（对最终绘制没有实际影响），让代码更简洁。

这样修改后，每个平面都会正确绑定自己对应的Canvas纹理，你预期的网格效果就能正常显示了。

内容的提问来源于stack exchange，提问作者user128511