A-Frameを使って、ARでボクセルのモデルを表示する 📦

昨日つくったボクセルをA-Frameを使ってARで表示してみました。

blog.kimizuka.org

A-Frameも内部はThree.jsを使っているので、もっと色々できそうな気がします。
あと、3Dモデルを確認するインターフェイスとして、マーカー型ARは非常に優秀な手段かもしれないと思いました。

ソースコード

HTML

<a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
  <a-marker type='pattern' url='./pattern.patt'>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

JavaScript

  const marker = document.querySelector('a-marker');
  const wrapper = document.createElement('a-entity');
  const entity = document.createElement('a-entity');
  const size = .15;
  const boxes = [
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,1,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,1,1,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,1,1,1,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,1,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,1,0,0,
    0,0,0,0,0,0,0,1,0,0,
    0,0,0,2,0,1,1,1,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,1,0,0,
    0,0,2,2,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,1,
    0,0,0,0,0,0,0,1,0,0,
    0,0,2,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,1,1,1,
    0,0,0,0,0,0,0,1,0,0,
    2,2,2,2,1,1,1,1,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,1,0,0,
    0,0,2,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,2,2,0,0,1,1,1,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,0,2,0,0,1,1,1,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,

    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,0,0,0,0,1,1,1,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0
  ];
  let deg = 0;

  boxes.forEach((num, i) => {
    const box = document.createElement('a-box');

    switch (num) {
      case 0:
        return;
        break;
      case 1:
        box.setAttribute('color', '#fff');
        break;
      case 2:
        box.setAttribute('color', '#888');
        break;
    }

    const position = getPosition(i);

    box.setAttribute('metalness', .25);
    box.setAttribute('position', `${position.x * size} ${position.y * size} ${position.z * size}`);
    box.setAttribute('width', size);
    box.setAttribute('height', size);
    box.setAttribute('depth', size);

    wrapper.appendChild(box);
  });

  wrapper.setAttribute('position', `${-5 * size} 0 ${-5 * size}`);
  entity.appendChild(wrapper);

  marker.appendChild(entity);

  function getPosition(i) {
    const length = boxes.length;

    const x = i % Math.cbrt(length);
    const y = 0 | i / Math.pow(Math.cbrt(length), 2);
    const z = 0 | i / Math.cbrt(length) % Math.cbrt(length);

    return { x, y, z };
  }