モデルの差し替え - noonworks/a-l2d GitHub Wiki

モデルの差し替え

1. モデルの準備

使用できるモデルについてを確認し、モデルのデータをエクスポートしておきます。

以降では以下の MyModel モデルを例に解説します。

MyModel  : モデル1つに1つのフォルダを作る
│
├─MyModel.512          : テクスチャ画像フォルダ
│    └─texture_00.png : テクスチャ画像
│
├─MyModel.moc3         : モデル情報ファイル
├─MyModel.model3.json  : モデル情報ファイル
├─MyModel.cdi3.json    : モデル情報ファイル
│
├─MyModel_wait.motion3.json : モーションファイル（使いたい数だけ、好きな名前）
│         ...
└─MyModel_click.motion3.json

2. モデルのアップロード

用意したサーバーの assets フォルダに、 MyModel フォルダをアップロードします。
assets フォルダは以下のようになります。

assets
├─Haruto : サンプルモデル(1)
├─Koharu : サンプルモデル(2)
└─MyModel : 追加したフォルダ

3. 設定ファイルの作成

モデルをどこに表示するか、モーションをどの順番で表示するかなどの設定ファイルを作成します。
サンプルの設定をコピーし、必要な部分を書き換えて使用します。

  1. デモフォルダ内の Haruto.json をコピーし、 MyModel.json を作ります。
  2. 後述の説明を見ながら、必要な部分を書き換えます。
{
  "models": [
    {
      "id": "MyModel",
      "x": 0.5,
      "y": 0.5,
      "assets": {
        "model3": "assets/MyModel/MyModel.model3.json",
        "motion1": "assets/MyModel/MyModel_01.motion3.json",
        "motion2": "assets/MyModel/MyModel_02.motion3.json",
        "motion3": "assets/MyModel/MyModel_03.motion3.json",
        "motion4": "assets/MyModel/MyModel_04.motion3.json"
      },
      "motions": {
        "basic": {
          "order": "random",
          "values": ["motion2", "motion3", "motion4"]
        },
        "click": {
          "order": "random",
          "values": ["motion1"]
        }
      }
    }
  ]
}

4 行目: "id"

モデルの名前を書き換えます。例：MyModel

5,6 行目: "x","y"

モデルの表示位置を決めるパラメーターです。通常は、xとyのどちらも0.5にします。

デモ用サンプルでは、Haruto と Koharu のモデルを横に並べるために、xの値を変更しています。
この値は、実際にモデルを表示できるようになってから微調整するといいでしょう。

7 行目: "assets"

モデル情報ファイルの場所や、モーションファイルの場所を設定します。

  • "model3": .model3.jsonの場所を設定します。ファイル名を書き換えれば OK です。
  • "motion1"～"motion4": モーションファイルの場所を設定します。
    • モーションが多い場合は、"motion5"、"motion6"……と増やします。
    • モーションが少ない場合は、余った項目を削除します。
    • 最後の 1 つ以外は、末尾に,をつけるのを忘れないようにしてください。

14 行目: "motions"

どのモーションをいつ表示するか設定します。

15 行目: "basic"

待機時（何もないとき）のモーションを指定します。

  • 16 行目: "order"
    モーションを表示する順番の設定です。以下の 3 種類が設定できます。
    • "random": モーションのリストからランダムに再生します。（同じものが何連続もする可能性があります）
    • "order": モーションのリストに書かれた順番で再生し、ループします。
    • "unique-random": モーションのリストから重複しないようにランダムに再生し、ループします。
  • 17 行目: "values"
    モーションのリストです。"assets"に指定したモーションの番号を使って指定します。
    • 例：["motion2", "motion3", "motion4"]で、3 つのモーションを指定します。
    • 例：["motion2"]で、1 つのモーションを指定します。

19 行目: "click"

画面がクリック（タップ）された時のモーションを指定します。

  • 20 行目: "order"
    モーションを表示する順番の設定です。以下の 3 種類が設定できます。
    • "random": モーションのリストからランダムに再生します。（同じものが何連続もする可能性があります）
    • "order": モーションのリストに書かれた順番で再生し、ループします。
    • "unique-random": モーションのリストから重複しないようにランダムに再生し、ループします。
  • 21 行目: "values"
    モーションのリストです。"assets"に指定したモーションの番号を使って指定します。
    • 例：["motion2", "motion3", "motion4"]で、3 つのモーションを指定します。
    • 例：["motion2"]で、1 つのモーションを指定します。
    • 例：[]で、0 個のモーションを指定＝クリック時にはなにもしないと設定します。

4. 設定ファイルのアップロード

用意したサーバーに MyModel.json をアップロードします。

5. demo.html の編集

demo.html ファイルを編集します。
HTML ファイル内でモデルの設定をしているのは以下の部分です。

<a-marker preset="hiro" changeMatrixMode="modelViewMatrix">
  <a-l2d src="Haruto.json" id="back"></a-l2d>
  <a-l2d src="Koharu.json" position="0 1 0" id="front"></a-l2d>
</a-marker>

この部分を以下のように書き換えます。 （サンプル用のHarutoを削除し、MyModelを追加しています）

<a-marker preset="hiro" changeMatrixMode="modelViewMatrix">
  <a-l2d src="MyModel.json"></a-l2d>
  <a-l2d src="Koharu.json" position="0 1 0" id="front"></a-l2d>
</a-marker>

6. demo.html のアップロード

用意したサーバーに書き換えた demo.html を上書きアップロードします。

7. 動作確認

  1. PC でデモ用マーカーにアクセスし、マーカーを表示します。
  2. スマートフォンやタブレットで、アップロードしたページにアクセスします。
    （https://（自分のURL）/demo.html）
  3. カメラでマーカーを映し、動作を確認します。

8. 調整

  • 3 ～ 7 を繰り返して、モデルの位置やモーションの設定を調整します。
  • お好みで demo.html のファイル名を変更し、URL を変更します。

Node.js がわかる人向け：
npm run serve:web を実行すると docs ディレクトリをローカルサーバーでホストし ngrok を使って一時的なアドレスを取得して公開します。そのままテストに使用できます。

⚠️ **GitHub.com Fallback** ⚠️