glTFモデルのアニメーションglTFモデルのアニメーション動的にglTFモデルの位置・向きを変更するアニメーションを作成する方法を説明します。サンプルコード動的にglTFモデルの位置・向きを変更するアニメーションを作成するglTFModelAnimation.html及び、glTFModelAnimation.jsのサンプルコードとシーンファイル(glTFAnimation.json)です。このサンプルコードでは、glTFモデルが京都御所沿いの道路を北上したのち、西向きに向きを変え、さらに西進するアニメーションを表現します。クリックしてダウンロードしてください。ダウンロードリンクからダウンロードした場合はzipファイルを展開してご利用ください。展開したデータは解凍した結果できたディレクトリを含めて、mapray-jsのルートディレクトリからの相対パスで以下のディレクトリに保存されているという想定で以下の説明を行います。./examples/entity/gltf/data/なお、データは当社の著作物ではありません。著作権は各データの作成者に帰属します。詳細はフォルダ中のLICENSEファイルを参照の上ご利用ください。ユーザーの皆様がコンテンツの権利を侵害した場合、当社では一切責任を追うものではありませんのでご注意ください。モデルを移動させるパス。球面座標系(経度、緯度、高度)で視点を設定。]}htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。charset="utf-8">タイトルの設定5行目でタイトルを設定します。このサンプルコードでは、glTFModelAnimationSampleを設定します。5<title>glTFModelAnimationSample</title>JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、モデルのアニメーションJavaScriptファイル(glTFModelAnimation.js)を設定します。src="glTFModelAnimation.js"></script>スタイルの設定9~20行目で表示する要素のスタイルを設定します。スタイルの詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画面を表示するときに、glTFモデルアニメーションクラスを作成します。そのため、23行目でページの読み込み時に、地図表示部分のブロックのidからglTFモデルアニメーションクラスのインスタンスを生成します。glTFモデルアニメーションクラスはJavaScriptのサンプルコードの詳細で説明します。ModelAnimation('mapray-container');">地図表示部分の指定24行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。id="mapray-container"></div>JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスとグローバル変数の説明1~148行目のクラスは、glTFモデルアニメーションクラスです。アニメーションを表現するために、glTFモデルアニメーション作成クラスは、mapray.RenderCallbackクラスを継承します。//中略}コンストラクタ2~37行目がモデルのアニメーションクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、glTFモデルの出典情報を追加します。mapray.Viewerのベース地図の画像プロバイダは、画像プロバイダの生成メソッドで取得した画像プロバイダを設定します。mapray.Viewerの作成の詳細は、ヘルプページ『カメラのアニメーション』を参照してください。次に、glTFモデルの操作に関する初期値を下記のように設定します。0最後に、カメラの位置・向きの設定、シーンのロードの順にメソッドを呼び出します。モデルを移動させるパス。this.LoadScene();}レンダリングループの開始時のコールバックメソッド40~44行目がレンダリングループの開始時のコールバックメソッドです。レンダリングループの開始時のコールバックメソッドの詳細は、ヘルプページ『パスに沿ったカメラアニメーション』を参照してください。0.0;}フレームレンダリング前のコールバックメソッド(glTFモデルの位置・向きの後進処理)47~72行目がフレームレンダリング前のコールバックメソッドです。このサンプルコードでは、この中で、glTFモデルが正常に読み込まれている場合は、glTFモデルの位置・向きの更新処理を行います。56~63行目で、引数の経過時間をもとに、線形補間時の現在の割合を計算します。その際、現在の割合が1より大きくなった場合は、線形補間対象となる区間番号を1つ増やし、現在の割合を0に設定します。全ての区間を補間し終えた場合は、区間番号0にリセットします。次に、65~67行目で、線形補間の対象区間の緯度・経度・高度を線形補間し、現在の位置となる緯度・経度・高度を求めます。69行目で、線形補間の対象区間のglTFモデルの向きを線形補間し、現在のglTFモデルの向きを求めます。最後に、glTFモデルの姿勢変換行列の設定メソッドを呼び出し、現在の位置、向きを用いて、glTFモデルの姿勢変換行列を現在の状態に更新します。glTFモデルの姿勢変換行列の詳細は後述します。this.UpdateModelPosition();}画像プロバイダの生成75~77行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。18);}カメラの位置・向きの設定80~104行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。球面座標系(経度、緯度、高度)で視点を設定。500000;}シーンのロード107~119行目がシーンのロードメソッドです。シーンのロードは、ヘルプページ『glTFモデルの表示(SceneLoaderを使った表示)』を参照してください。loader.load();}リソース要求変換121~127行目がリソース要求変換メソッドです。リソース要求変換は、ヘルプページ『glTFモデルの表示(SceneLoaderを使った表示)』を参照してください。};}シーンのロード終了イベント129~135行目がシーンのロード終了イベントメソッドです。引数のisSuccessには、読み込み結果が格納されており、trueの場合のみ読み込んだglTFモデルを表示し、glTFモデルを操作できるようにします。glTFモデルのロード成功可否をtrueにし、glTFモデルの表示位置を設定するメソッドを呼び出します。glTFモデルの表示位置を設定するメソッドの詳細は後述します。}}glTFモデルの表示位置の設定137~146行目がglTFモデルの表示位置の設定メソッドです。モデルの表示位置、向きをモデルのエンティティに反映します。142行目でモデルの表示位置を、144行目でモデルの向きをそれぞれ設定します。読み込んだモデルは1つ目のエンティティとなるため、エンティティ取得時の引数には0を指定します。0));}シーンファイルの詳細シーンファイルの詳細を以下で解説します。シーンファイルはJSON形式で記述します。エンティティの設定8行目でentity_listという名称でエンティティを定義し、その中にエンティティの詳細を定義します。9行目のtypeという名称は、エンティティの種類を表し、glTFモデルの場合はmodelを指定します。]}glTFモデルのデータ2~7行目でmodel_registerという名称でモデルデータを定義します。このシーンファイルでは、モデルデータのIDをmodel-0とし、モデルファイルをファイルから読み込むために、linkという名称にglTFファイルのURLを指定します。モデルの初期向きとスケールをoffset_transformという名称で指定することができます。今回のデータでは下記の内容を定義します。},汎用エンティティの設定8~15行目で汎用エンティティの設定をします。汎用エンティティには以下の内容を定義します。"absolute"出力イメージこのサンプルコードで初期状態の出力イメージは下図のようになります。出力イメージ初期状態から時間が経過し、向きを西向きに変更する時の出力イメージは、下図のようになります。出力イメージさらに時間が経過し、西進している時の出力イメージは、下図のようになります。