A-Frameは、glTF と OBJを読み込むためのコンポーネントを提供しています。 glTFは、Web上での3Dモデル転送の標準として採用が進んでいるため、[可能であればglTFを使用することをお勧めします]。 コンポーネントは、どんなファイルフォーマットでも、特にthree.jsのローダー (opens new window)があるフォーマットであれば、対応できるように記述することが可能です。 また、他のフォーマット（例：PLY、FBX、JSON、three.js）を処理するために既に書かれているエコシステムのコンポーネントを探してみる ことも可能です。

モデルは、頂点、面、UV、テクスチャ、マテリアル、およびアニメーションを含むプレーンテキストファイルの形式で提供されます。 合わせて、テクスチャとして使用するイメージ画像も含みます。 three.jsローダーは、これらのファイルを解析して、3.jsのシーン内でメッシュとしてレンダリングします。A-Frameのモデルコンポーネントは、これらのthree.jsローダーをラップしています。

モデルをアニメーションさせる

Don McCurdy氏のanimation-mixerコンポーネント (opens new window)を使って、モデルに内蔵されているアニメーションを再生することができます。 アニメーションは通常、A-Frameレベルで提供されるのではなく、アニメーションツールやプログラムを通じて構築されたモデルに搭載されています。 このanimation-mixerコンポーネントは、将来的にA-Frameのコアに統合されるかもしれません。

アニメーションを作成するための最初の資料としては、以下を参照してください。

• Blenderチュートリアル - アニメーションやゲームで再利用するためのアクションの作成と編集 (opens new window)
• ワークフロー： Blenderからthree.jsへのアニメーションby Arturo Paracuellos (opens new window)

3Dモデルを見つける

3Dモデルを以下で見つけることができます。

• Sketchfab (opens new window)
• Clara.io (opens new window)
• Archive3D (opens new window)
• Sketchup's 3D Warehouse (opens new window)
• TurboSquid (opens new window)

３Dモデルの作成方法

３Dモデルを作るには以下のアプリケーションが利用できます

• Supercraft (opens new window) - A-Frameに含まれており、モデリングのスキルを必要とすることなく、VR内でモデリングでき、 aframe-supercraft-loader (opens new window)でロードされます。
• Blender (opens new window)
• MagicaVoxel (opens new window)
• Autodesk Maya (opens new window) もしくは Maya LT (opens new window)
• Maxon Cinema4D (opens new window)

３Dモデルをホストする

ホスティングと公開 — モデルのホスティング.を参照してください。

マテリアルの修正

モデルの素材を変更するには、モデルの読み込みを待って、モデルから作成されたthree.jsのメッシュを変更する必要があります。 A-Frameのモデルコンポーネントは、ネットワーク上でモデルを要求し、モデルを解析し、three.jsのメッシュやオブジェクトを作成し、<a-entity>配下の getObject3D('mesh') で読み込みます。そのメッシュに到達して、マテリアルをいかようにも変更することができます。このケースではthree.jsのマテリアルです。

ロードされたモデルのマテリアルを変更するライブサンプル (opens new window)を見ることができます。

<script>
  AFRAME.registerComponent('modify-materials', {
    init: function () {
      // Wait for model to load.
      this.el.addEventListener('model-loaded', () => {
        // Grab the mesh / scene.
        const obj = this.el.getObject3D('mesh');
        // Go over the submeshes and modify materials we want.
        obj.traverse(node => {
          if (node.name.indexOf('ship') !== -1) {
            node.material.color.set('red');
          }
        });
      });
    }
  });
</script>

<a-scene background="color: #ECECEC">
  <a-assets>
    <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#cityModel" modify-materials></a-entity>
</a-scene>

トラブルシューティング

何よりもまず、コンソールにエラーがないかどうか確認してください。CORS に関連する一般的な問題は、モデルを適切にホストすることで解決できます。また、モデルが不足している追加ファイルを必要とする場合にも、コンソールが教えてくれます。

自分のモデルが表示されない

コンソールにエラーがない場合、モデルを縮小してみてください。エクスポート時に縮尺の不一致がある場合が多く、その場合、カメラがモデルの中に入ってしまい、見ることができません。

<a-entity gltf-model="#tree" scale="0.01 0.01 0.01"></a-entity>

これでうまくいかない場合、インスペクターを開きctrl + alt + iを押してズームアウトし、モデルの位置を確かめてください。

テクスチャが表示されない

テクスチャがすぐに使えないことがあります。 これは通常、エクスポーターがテクスチャに絶対パス (C:\\Path\To\Model\texture.jpg や /Path/To/Model/texture.jpg というように）を使用するためで、ウェブ上では機能しません。代わりに、texture.jpg や images/texture.jpg のように、モデルまたは .mtl ファイルからの相対パスを使用します。

1. モデル（OBJの場合は.mtl）をプレーンテキストエディタで開いてください。
2. テクスチャの名前（例：texture.jpg）を検索します。
3. テクスチャのパスを絶対パスではなく、相対パスにして修正します。

この方法でうまくいかなかった場合、MTLファイルを調べてみて、TGAやその他の、プレーン・イメージではない種類のテクスチャを使おうとしていることに気づくかもしれません。この場合、three.jsのローダーを追加で入れる必要があります。しかし、予めTGAをPNGのような画像に変換しておき、「tga」のインスタンスをすべて「png」に置き換えると、より簡単になるでしょう。

モデルがアニメーションしない

Animation-mixerコンポーネント (opens new window)は、Don McCurdy氏によるaframe-extras (opens new window)の一部で、three.js (.json) とglTF (.gltf)モデルでアニメーションを再生するためのコントロールを提供するものです。

モデルが歪む

モデルでよくある問題は、法線の向きが正しくないことです。 ジオメトリの面の一部が透明になっていたり、メッシュに「穴」が開いていたりすると、法線の問題があることが分かります。

1. Blenderにモデルをインポートします。
2. プロパティパネルのシェーディングセクションでバックフェイスカリングをオンにして（n）、どの面が不正確かを把握します。
3. オブジェクトを選択します。
4. 編集モード (<tab>) に移行します。
5. aボタンですべての面を選択
6. <ctrl> + nを押して法線を一致させる。逆に見える場合は、ツールバー(t)を使って反転させてください。

モデルのパフォーマンス

大きなファイルや複雑なモデルを読み込むと、ブラウザの動作が遅くなったり、読み込めなくなったりすることに気づくことがあります。高忠実度のレンダリング用に設計された詳細なモデルは、リアルタイムのアプリケーションには適していません。しかし、外観を維持したままパフォーマンスを向上させるためにできることがいくつかあります。

パフォーマンスをテストする

シーンのパフォーマンスを知るために、statsコンポーネントを有効にします。

<a-scene stats>

グラフを見ながらシーンを移動してさまざまなシナリオをテストし、必ず異なるハードウェアでテストしてください。 開発用PCは、スマートフォンよりも簡単にシーンを処理できる可能性が高いでしょう。 60fpsに達しない場合は、原因が見つかるまで、シーンのさまざまな要素を削除してみてください。 パフォーマンスの原因となっているのが3Dモデルであれば、それを最適化することができます。

詳細なモデルを最適化する

シーンの最適化の最大の要因の1つは、モデルの複雑さと面数です。ジオメトリは少なければ少ないほどよいです。

モデルの面数を減らす手っ取り早い方法は、Blenderのdecimateモディファイアを使用することです。 decimateモディファイアはモデルのUV座標を保持したまま、ジオメトリの面の量を減らします。 適切なモデリング技術に勝るものはありませんが、Decimateモディファイアは最適化されていないファイルをよりスムーズに動作させるための素晴らしい最終手段になりえます。モディファイヤーの設定は、モデルやどの程度ディテールを除去したいかに大きく依存します。

比率（ハイライト表示）を調整し、面の数を減らします。

最後に一部の面を手動で修正する必要があるかもしれません。結果に満足したら、コピーを保存し、希望のファイルタイプにエクスポートします。テストして、必要に応じて調整します。なお、モディファイアを適用しないと効果が出ない場合があります。