出力イメージmapray.SceneLoaderを使ってglTFモデルを表示する方法を説明します。このサンプルコードでは、薬師寺の場所に3Dモデルを表示します。ダウンロードリンクをクリックしてダウンロードしてください。ダウンロードリンクからダウンロードした場合はzipファイルを展開してご利用ください。展開したデータは解凍した結果できたディレクトリを含めて、mapray-jsのルートディレクトリからの相対パスで以下のディレクトリに保存されているという想定で以下の説明を行います。./examples/entity/gltf/data/なお、データは当社の著作物ではありません。著作権は各データの作成者に帰属します。詳細はフォルダ中のLICENSEファイルを参照の上ご利用ください。ユーザーの皆様がコンテンツの権利を侵害した場合、当社では一切責任を追うものではありませんのでご注意ください。球面座標系(経度、緯度、高度)で視点を設定。htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。タイトルの設定5行目でタイトルを設定します。このサンプルコードでは、LoadglTFModelSampleを設定します。JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。スタイルの設定9~20行目で表示する要素のスタイルを設定します。スタイルの詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画面を表示するときに、モデルシーン読み込みクラスを生成します。そのため、23行目でページの読み込み時に、地図表示部分のブロックのidからモデルシーン読み込みクラスのインスタンスを生成します。モデルシーン読み込みクラスはJavaScriptのサンプルコードの詳細で説明します。地図表示部分の指定24行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスの説明2~91行目で、モデルシーンを読み込み、表示するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。コンストラクタ2~23行目がモデルシーンを読み込み、表示するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、glTFモデルの出典情報を追加します。カメラの位置・向きの設定メソッドを呼び出します。その後、シーンのロードメソッドを呼び出します。viewerを作成する際の画像プロバイダは画像プロバイダの生成メソッドから取得します。mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画像プロバイダの生成26~29行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。カメラの位置・向きの設定32~56行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。球面座標系(経度、緯度、高度)で視点を設定。シーンのロード59~71行目がシーンのロードメソッドです。mapray.SceneLoaderでシーンを読み込みます。SceneLoaderクラス生成時の引数には、シーンファイルのエンティティを追加するシーン、読み込むシーンファイルのURL、オプション集合の順に指定します。このサンプルコードでは、viewerクラスのシーン、60行目で設定したURL、リソース要求変換関数、シーンのロードが終了した時のコールバック関数の順に指定します。読み込むシーンのURLはhttpもしくはhttpsでアクセスできるURLを指定します。最後に、70行目のload関数を呼び出すことでシーンの読み込みができます。リソース要求変換73~79行目はリソース要求変換メソッドです。リソースのリクエスト時にURLなどを変換する内容を定義します。このサンプルコードでは、特に指定はしないので、リファレンスに沿った内容で定義します。シーンのロード終了イベント81~89行目がシーンのロード終了イベントメソッドです。引数のisSuccessには、読み込み結果が格納されており、trueの場合のみ読み込んだglTFモデルを表示します。読み込んだモデルの向きを調整するため、87行目で、適切な向きをエンティティに反映させることで、地図上にglTFモデルを表示します。読み込んだモデルは1つ目のエンティティとなるため、エンティティ取得時の引数には0を指定します。シーンファイルの詳細シーンファイルの詳細を以下で解説します。シーンファイルはJSON形式で記述します。エンティティの設定3行目でentity_listという名称でエンティティを定義し、その中にエンティティの詳細を定義します。4行目のtypeという名称は、エンティティの種類を表し、glTFモデルの場合はmodelを指定します。glTFモデルのデータ2行目でmodel_registerという名称でモデルデータを定義します。このシーンファイルでは、モデルデータのIDをmodel-0とし、モデルファイルをファイルから読み込むために、linkという名称にglTFファイルのURLを指定します。汎用エンティティの設定4~8行目で汎用エンティティの設定をします。汎用エンティティには以下の内容を定義します。出力イメージこのサンプルコードの出力イメージは下図のようになります。glTFモデルの表示の改修このサンプルコードを改修して、下記のglTFモデルを表示できるようにします。シーンファイル内に記載する方法もあるため、その方法についても記載します。サンプルコードの修正部分は2つあり、以下で解説します。カメラの見る位置の変更カメラの位置・向きの設定メソッドを下記のように変更します。この修正では、視点位置はを小倉城周辺に変更し、視線方向も小倉城が眺められる方向に変更しています。球面座標系(経度、緯度、高度)で視点を設定。読み込み対象の変更シーンのロードメソッドで読み込み対象のシーンファイルを下記のように変更します。シーンファイル上でモデルの向き、スケールを設定するため、ロード後に実行することがなくなるので、今回はコールバック関数を設定しません。変更したシーンファイルの詳細は下記のとおりです。表示するモデルとして、小倉城のglTFモデルデータを読み込むように作成しています。モデルの初期向きとスケールは、offset_transformという名称で指定することができます。このシーンファイルでは、下記の内容を定義しています。出力イメージ修正したサンプルコードの出力イメージは下図のようになります。Corporation。