BlenderでつくったglbファイルをA-Frameに読み込んでマテリアルの色を編集する 📦

f:id:kimizuka:20201130222254j:plain

こちらの記事のA-Frameバージョンです。

blog.kimizuka.org

❶ Blenderでモデルをつくる
❷ glbファイルを書き出す
❸ glbを読み込むHTMLをつくる
❹ マテリアルを取得して色を変えてみる
❺ カスタムデータ属性で色を変更可能にする

❶ Blenderでモデルをつくる

f:id:kimizuka:20210310183328p:plain

とりあえずキューブをつくりました。というか、Blenderを起動するとそこにあります。
カメラとライトを消してキューブだけにしてあります。

❷ glbファイルを書き出す

File > Export > glTF 2.0 (.glb/gltf) で書き出せます。
ファイル名はcube.glbと名付けました。

書き出したファイルは、こちらのサイトを使えば、ブラウザ上で簡単に確認できます。

gltf-viewer.donmccurdy.com

❸ glbを読み込むHTMLをつくる

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>gltf</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
  <a-scene vr-mode-ui="enabled: false">
    <a-gltf-model src="cube.glb" position="0 0 0"></a-gltf-model>
  </a-scene>
</body>
</html>

f:id:kimizuka:20210310185610p:plain

A-Frameを使えば、ざっくり13行で読み込めます。すごい。

❹ マテリアルを取得して色を変えてみる

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>gltf</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script>
    const cube = AFRAME.registerComponent('cube', {
      play: function() {
        const mesh = this.el.object3D.getObjectByName('Cube');

        if (mesh) {
          mesh.material.color.r = 1;
          mesh.material.color.g = 0;
          mesh.material.color.b = 0;
        }
      }
    });
  </script>
</head>
<body>
  <a-scene vr-mode-ui="enabled: false">
    <a-gltf-model src="cube.glb" position="0 0 0"></a-gltf-model>
  </a-scene>
</body>
</html>

scriptを追加してみました。

const mesh = this.el.object3D.getObjectByName('Cube');

ここで、（多分）メッシュを取得してます。
getObjectNameの引数にいれる'Cube'という文字列はBlenderの、

f:id:kimizuka:20210310185030p:plain

この部分です。

メッシュが取得できれば、

mesh.material.color.r = 1;
mesh.material.color.g = 0;
mesh.material.color.b = 0;

と、マテリアルにアクセスして色を変えたりできます。

そう。これで、

f:id:kimizuka:20210310185638p:plain

色が変わります。

❺ カスタムデータ属性で色を変更可能にする

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>gltf</title>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script>
    const cube = AFRAME.registerComponent('cube', {
      play: function() {
        if (this.el.dataset.color) {
          const model = this.el.object3D.getObjectByName('Cube');

          if (model) {
            switch (this.el.dataset.color) {
              case 'red':
                model.material.color.r = 1;
                model.material.color.g = 0;
                model.material.color.b = 0;
                break;
              case 'green':
                model.material.color.r = 0;
                model.material.color.g = 1;
                model.material.color.b = 0;
                break;
              case 'blue':
                model.material.color.r = 0;
                model.material.color.g = 0;
                model.material.color.b = 1;
                break;
            }
          }
        }
      }
    });
  </script>
</head>
<body>
  <a-scene vr-mode-ui="enabled: false">
    <a-gltf-model src="cube.glb" position="0 0 0"></a-gltf-model>
    <a-gltf-model cube data-color="red" src="cube.glb" position="3 0 0"></a-gltf-model>
    <a-gltf-model cube data-color="green" src="cube.glb" position="0 0 3"></a-gltf-model>
    <a-gltf-model cube data-color="blue" src="cube.glb" position="3 0 3"></a-gltf-model>
    <a-entity camera position="8 8 8" rotation="-30 30 0"></a-entity>
  </a-scene>
</body>
</html>