出力イメージユーザインタフェースを介して、glTFモデルを移動・回転させる方法を説明します。このサンプルコードでは、対応するボタンを操作することで、前進、後進、左90度回転、右90度回転ができます。ダウンロードリンクをクリックしてダウンロードしてください。ダウンロードリンクからダウンロードした場合はzipファイルを展開してご利用ください。展開したデータは解凍した結果できたディレクトリを含めて、mapray-jsのルートディレクトリからの相対パスで以下のディレクトリに保存されているという想定で以下の説明を行います。./examples/entity/gltf/data/なお、データは当社の著作物ではありません。著作権は各データの作成者に帰属します。詳細はフォルダ中のLICENSEファイルを参照の上ご利用ください。ユーザーの皆様がコンテンツの権利を侵害した場合、当社では一切責任を追うものではありませんのでご注意ください。球面座標系(経度、緯度、高度)で視点を設定。htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。タイトルの設定5行目でタイトルの設定をします。このサンプルコードでは、glTFModelControllerSampleを設定します。JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。スタイルの設定9~66行目で表示する要素のスタイルを設定します。このサンプルコードでは、下記のスタイルを設定します。画面を表示するときに、glTFモデルを操作するクラスを生成します。)を呼ぶように設定します。glTFモデルを操作するクラスのインスタンスを生成する関数は、JavaScriptのサンプルコードの詳細で説明します。地図表示部分の指定70行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。モデル操作のUI72~77行目でモデル操作ボタン表示部分のブロックを記述します。このブロックの中には、前進ボタン、左回転ボタン、右回転ボタン、後退ボタンを用意します。前進ボタンをクリックした時のイベント(onclick)に、前進ボタンクリック時に呼び出す関数(ForwardButtonClicked)を設定します。同様に、各ボタンのクリック時に呼び出す関数(LeftTurnButtonClicked、RightTurnButtonClicked、BackwardButtonClicked)をそれぞれ設定します。各ボタンのクリック時に呼び出す関数は、JavaScriptのサンプルコードの詳細で説明します。JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスとグローバル変数の説明3~174行目でglTFモデルを操作するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。1行目でglTFモデルを操作するクラスのグローバル変数を定義します。コンストラクタ4~31行目がglTFモデルを操作するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、glTFモデルの出典情報を追加します。mapray.Viewerのベース地図の画像プロバイダは、画像プロバイダの生成メソッドで取得した画像プロバイダを設定します。mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。次に、glTFモデルの操作に関する初期値を下記のように設定します。最後に、カメラの位置・向きの設定、シーンのロードの順にメソッドを呼び出します。画像プロバイダを生成34~37行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。カメラの位置・向きの設定40~64行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。球面座標系(経度、緯度、高度)で視点を設定。シーンのロード67~79行目がシーンのロードメソッドです。シーンのロードは、ヘルプページ『glTFモデルの表示(SceneLoaderを使った表示)』を参照してください。リソース要求変換81~87行目がリソース要求変換メソッドです。リソース要求変換は、ヘルプページ『glTFモデルの表示(SceneLoaderを使った表示)』を参照してください。シーンのロード終了イベント89~95行目がシーンのロード終了イベントメソッドです。引数のisSuccessには、読み込み結果が格納されており、trueの場合のみ読み込んだglTFモデルを表示し、glTFモデルを操作できるようにします。glTFモデルのロード成功可否をtrueにし、glTFモデルの表示位置を設定するメソッドを呼び出します。glTFモデルの表示位置を設定するメソッドの詳細は後述します。glTFモデルの表示位置の設定97~106行目がglTFモデルの表示位置の設定メソッドです。モデルの表示位置、向きをモデルのエンティティに反映します。102行目でモデルの表示位置を設定、105行目でモデルの向きをそれぞれ設定します。読み込んだモデルは1つ目のエンティティとなるため、エンティティ取得時の引数には0を指定します。移動方向ベクトルの作成108~126行目が移動方向ベクトル作成メソッドです。現在の向きを表す回転行列を利用して、最新の移動方向ベクトルを求めます。110~119行目で、移動方向を表す変換行列を単位行列に初期化し、glTFモデルの初期の前方向であるY軸方向に単位移動量である1分移動させます。その後、移動方向を表す変換行列に、現在の向きを表す変換行列を掛け合わせることで、現在の移動方向を表す変換行列を求めます。求めた現在の移動方向を表す変換行列から、移動方向成分に該当する部分を抜き出し、移動方向ベクトルとして設定します。前進128~137行目が前進メソッドです。glTFモデルが正常に読み込まれている場合は、現在のglTFモデルの移動方向ベクトルに移動量を掛けた値をモデルの緯度・経度に加算し、glTFモデルの姿勢変換行列の設定メソッドを呼び出します。後進139~148行目が後退メソッドです。glTFモデルが正常に読み込まれている場合は、現在のglTFモデルの移動方向ベクトルに移動量を掛けた値をモデルの緯度・経度に減算し、glTFモデルの姿勢変換行列の設定メソッドを呼び出します。左回転150~160行目が左回転メソッドです。glTFモデルが正常に読み込まれている場合は、現在のglTFモデルの回転角度に90を加算し、glTFモデルの姿勢変換行列の設定メソッドを呼び出します。右回転162~172行目が右回転メソッドです。glTFモデルが正常に読み込まれている場合は、現在のglTFモデルの回転角度に90を減算し、glTFモデルの姿勢変換行列の設定メソッドを呼び出します。glTFモデルを操作するクラスのインスタンス生成176~178行目の関数は、引数として渡されるブロックのidを利用して、glTFモデルを操作するクラスのインスタンスを生成します。前進ボタンクリック時のイベント180~182行目の関数は、前進ボタンクリック時に呼ばれ、glTFモデルを操作するクラスの前進メソッドを呼び出します。後進ボタンクリック時のイベント184~186行目の関数は、後進ボタンクリック時に呼ばれ、glTFモデルを操作するクラスの後進メソッドを呼び出します。左回転ボタンクリック時のイベント188~190行目の関数は、左回転ボタンクリック時に呼ばれ、glTFモデルを操作するクラスの左回転メソッドを呼び出します。右回転ボタンクリック時のイベント192~194行目の関数は、右回転ボタンクリック時に呼ばれ、glTFモデルを操作するクラスの左回転メソッドを呼び出します。シーンファイルの詳細シーンファイルの詳細を以下で解説します。シーンファイルはJSON形式で記述します。エンティティの設定8行目でentity_listという名称でエンティティを定義し、その中にエンティティの詳細を定義します。9行目のtypeという名称は、エンティティの種類を表し、glTFモデルの場合はmodelを指定します。glTFモデルのデータ2~7行目でmodel_registerという名称でモデルデータを定義します。このシーンファイルでは、モデルデータのIDをmodel-0とし、モデルファイルをファイルから読み込むために、linkという名称にglTFファイルのURLを指定します。モデルの初期向きとスケールをoffset_transformという名称で指定することができます。今回のデータでは下記の内容を定義します。汎用エンティティの設定8~15行目で汎用エンティティの設定をします。汎用エンティティには以下の内容を定義します。出力イメージこのサンプルコードで初期状態の出力イメージは下図のようになります。初期状態から前進ボタンを5回押した時の出力イメージは下図のようになります。初期状態から後進ボタンを5回押した時の出力イメージは下図のようになります。初期状態から左回転ボタンを押した時の出力イメージは下図のようになります。初期状態から右回転ボタンを押した時の出力イメージは下図のようになります。Corporation。