AFrame：如何以编程方式创建画布纹理平面网格

Question

我不太了解aframe是如何在初始化时从JavaScript完成的。我创建了一个创建NxM平面的网格组件，每个平面都有自己的纹理画布。但由于某种原因，尽管画布是独一无二的，每个平面1个，但每个平面随机重复使用

我应该看到的是一个像

的网格

+---+ +---+ +---+
| 6 | | 7 | | 8 |
+---+ +---+ +---+
+---+ +---+ +---+
| 3 | | 4 | | 5 |
+---+ +---+ +---+
+---+ +---+ +---+
| 0 | | 1 | | 2 |
+---+ +---+ +---+

我所看到的是

我可能做些蠢事。这是代码。注意：由于aframe的工作方式，它们都停留在HTML部分。

＆＃13;

＆＃13;

<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;
      canvas.id = `c${Date.now()}`;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = `hsl(${i / needed * 360 | 0}deg,100%,50%)`;
      ctx.fillRect(0, 0, 256, 256);
      ctx.fillStyle = `hsl(${Math.random() * 360 | 0}deg,100%,80%)`;
      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,
      });
      elem.setAttribute('material', {
        shader: 'flat',
        src: canvas,
      });
      this.el.appendChild(elem);
      const x = i % across;
      const y = i / across | 0;
      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>

＆＃13;

＆＃13;

＆＃13;

我还尝试将画布添加到DOM并通过分配ID进行引用。相关的行是

  // make up an ID
  canvas.id = `c${Date.now()}`;

  // add to document
  document.body.appendChild(canvas);

  // make the src the id of the canvas
  elem.setAttribute('material', {
    shader: 'flat',
    src: `#${canvas.id}`,
  });

但它有同样的问题

＆＃13;

＆＃13;

<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;
      canvas.id = `c${Date.now()}`;
      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 = `hsl(${Math.random() * 360 | 0}deg,100%,80%)`;
      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,
      });
      elem.setAttribute('material', {
        shader: 'flat',
        src: `#${canvas.id}`,
      });
      this.el.appendChild(elem);
      const x = i % across;
      const y = i / across | 0;
      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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为这是因为a-frame正在如此快速地创建实体，使得Date.now不是唯一的。

在循环之外，尝试：

let id = 0;

然后是id：

canvas.id = `c${id++}`;

它似乎按预期工作。

<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;
    let id = 0;
    for (let i = 0; i < needed; ++i) {
      const canvas = document.createElement('canvas');
      canvas.width = 256;
      canvas.height = 256;
      canvas.id = `c${id++}`;
      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 = `hsl(${Math.random() * 360 | 0}deg,100%,80%)`;
      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,
      });
      elem.setAttribute('material', {
        shader: 'flat',
        src: `#${canvas.id}`,
      });
      this.el.appendChild(elem);
      const x = i % across;
      const y = i / across | 0;
      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>