こちらの記事のA-Frameバージョンです。
❶ Blenderでモデルをつくる
とりあえずキューブをつくりました。というか、Blenderを起動するとそこにあります。
カメラとライトを消してキューブだけにしてあります。
❷ glbファイルを書き出す
File > Export > glTF 2.0 (.glb/gltf) で書き出せます。
ファイル名はcube.glbと名付けました。
書き出したファイルは、こちらのサイトを使えば、ブラウザ上で簡単に確認できます。
❸ 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>
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の、
この部分です。
メッシュが取得できれば、
mesh.material.color.r = 1; mesh.material.color.g = 0; mesh.material.color.b = 0;
と、マテリアルにアクセスして色を変えたりできます。
そう。これで、
色が変わります。
❺ カスタムデータ属性で色を変更可能にする
<!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>
ドキュメントをみてみると、playのコールバックが設定できるみたいだったので、data-colorをみて色を変えられるようにしてみました。