AFrame: как программно создать сетку из текстурированных плоскостей холста - PullRequest
Новая
       8

AFrame: как программно создать сетку из текстурированных плоскостей холста

0 голосов
/ 22 мая 2018

Я не совсем понимаю, как во фрейме хотят что-то делать во время инициализации из JavaScript.Я создал компонент сетки, который создает плоскости NxM, каждая со своим холстом для текстуры.Но по какой-то причине, хотя холсты уникальны, по 1 на плоскость, они случайным образом повторно используются для каждой плоскости

То, что я должен увидеть, это сетка, похожая на 

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

Что ясм. вместо этого что-то вроде

enter image description here

Я мог бы сделать что-то глупое.Вот кодПримечание: все это застряло в разделе HTML из-за способа работы aframe. 

<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>

Я также попытался добавить холсты в DOM и создать ссылку, назначив идентификаторы.Соответствующие строки: 

  // 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}`,
  });

Но у него та же проблема

enter image description here

<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>

1 Ответ

0 голосов
/ 22 мая 2018

Я думаю, это потому, что a-frame создает сущности настолько быстро, что делает Date.now не уникальным.

Вне цикла попробуйте: 

let id = 0;

затем для идентификатора: 

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>
...