8.2 モデルの高度の設定方法の変更

モデルの高度の設定方法を変更する方法を説明します。

1. サンプルコード

モデルの高度の設定方法をを変更する ChangeAltitudeMode.html 及び、 ChangeAltitudeMode.js のサンプルコードとシーンファイル（ glTFChangeAltitudeMode.json ）です。このサンプルコードでは、ユーザインタフェースを介して、高度モードを変更します。変更できる項目は、高度の設定方法、高さです。高度の設定方法は、ABSOLUTE（絶対値）、RELATIVE（地表面からの相対値）、CLAMP（地表面に接地）に、高さは、0、40、100にそれぞれ変更できます。

1.1. glTFデータの入手

Sketchfabへアクセスし、glTFファイルフォーマットのデータをダウンロードする、もしくはダウンロードリンクをクリックしてダウンロードしてください。ダウンロードリンクからダウンロードした場合はzipファイルを展開してご利用ください。展開したデータは解凍した結果できたディレクトリを含めて、mapray-jsのルートディレクトリからの相対パスで以下のディレクトリに保存されているという想定で以下の説明を行います。

./examples/entity/gltf/data/

なお、データは当社の著作物ではありません。著作権は各データの作成者に帰属します。詳細はフォルダ中のLICENSEファイルを参照の上ご利用ください。ユーザーの皆様がコンテンツの権利を侵害した場合、当社では一切責任を追うものではありませんのでご注意ください。

1.2. ChangeAltitudeMode.html

 1: <!DOCTYPE html>
 2: <html>
 3:     <head>
 4:         <meta charset="utf-8">
 5:         <title>ChangeAltitudeModeSample</title>
 6:         <script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
 7:         <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
 8:         <script src="ChangeAltitudeMode.js" charset="utf-8"></script>
 9:         <style>
10:             html, body {
11:                 height: 100%;
12:                 margin: 0;
13:                 background-color:#E0E0E0;
14:             }
15: 
16:             select{
17:                 height:22px;
18:                 vertical-align:middle;
19:                 font-size:13px;
20:                 margin-left:10px;
21:             }
22: 
23:             p {
24:                 margin-left:5px;
25:                 font-size:13px;
26:             }
27: 
28:             input{
29:                 margin-left:10px;
30:             }
31: 
32:             div#mapray-container {
33:                 display: flex;
34:                 position: relative;
35:                 height: calc(100% - 34px);
36:             }
37: 
38:             div#AltitudeModeBox{
39:                 display: flex;
40:                 background-color:#E0E0E0;
41:                 height: 32px;
42:                 width: 200px;
43:                 float:left;
44:                 border:inset 1px #000000;
45:                 align-items:center;
46:             }
47: 
48:             div#HeightBox{
49:                 display: flex;
50:                 background-color:#E0E0E0;
51:                 height: 32px;
52:                 width: 110px;
53:                 float:left;
54:                 border:inset 1px #000000;
55:                 align-items:center;
56:             }
57:         </style>
58:     </head>
59: 
60:     <body onload="CreateChangeAltitudeModeInstance('mapray-container');">
61:         <div id="mapray-container"></div>
62: 
63:         <div id="AltitudeModeBox">
64:                 <p>Altitude Mode</p>
65:                 <select name="AltitudeModePullDown" id="AltitudeModePullDown" onchange="AltitudeModeValueChanged()">
66:                     <option value="ABSOLUTE">ABSOLUTE</option>
67:                     <option value="RELATIVE">RELATIVE</option>
68:                     <option value="CLAMP">CLAMP</option>
69:                 </select>
70:         </div>
71: 
72:         <div id="HeightBox">
73:                 <p>Height</p>
74:                 <select name="HeightPullDown" id="HeightPullDown" onchange="HeightValueChanged()">
75:                     <option value=0>0</option>
76:                     <option value=40 selected>40</option>
77:                     <option value=100>100</option>
78:                 </select>
79:         </div>
80:     </body>
81: </html>

1.3. ChangeAltitudeMode.js

  1: var change_altitude_mode;
  2: 
  3: class ChangeAltitudeMode {
  4:     constructor(container) {
  5:         // Access Tokenを設定
  6:         var accessToken = "<your access token here>";
  7: 
  8:         // Viewerを作成する
  9:         this.viewer = new mapray.Viewer(
 10:             container, {
 11:                 image_provider: this.createImageProvider(),
 12:                 dem_provider: new mapray.CloudDemProvider(accessToken)
 13:             }
 14:         );
 15: 
 16:         // glTFモデルのライセンス表示
 17:         this.viewer.attribution_controller.addAttribution( {
 18:             display: "Plane by osmosikum: Creative Commons - Attribution",
 19:             link: "https://sketchfab.com/3d-models/plane-cedc8a07370747f7b0d14400cdf2faf9"
 20:         } );
 21: 
 22:         this.model_Point = new mapray.GeoPoint(140.379528, 35.758832, 40.0);    //モデルの球面座標(経度、緯度、高度)
 23:         this.altitude_mode = mapray.AltitudeMode.ABSOLUTE;
 24: 
 25:         this.SetCamera()
 26: 
 27:         this.LoadScene();
 28:     }
 29: 
 30:     // 画像プロバイダを生成
 31:     createImageProvider() {
 32:         // 国土地理院提供の汎用的な地図タイルを設定
 33:         return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } );
 34:     }
 35: 
 36:     // カメラ位置の設定
 37:     SetCamera() {
 38:         // 球面座標系（経度、緯度、高度）で視点を設定。成田国際空港付近
 39:         var home_pos = { longitude: 140.379528, latitude: 35.758832, height: 40 };
 40: 
 41:         // 球面座標から地心直交座標へ変換
 42:         var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
 43:         var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
 44: 
 45:         // 視線方向を定義
 46:         var cam_pos = mapray.GeoMath.createVector3([-500, -1500, 500]);
 47:         var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
 48:         var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
 49: 
 50:         // ビュー変換行列を作成
 51:         var view_to_home = mapray.GeoMath.createMatrix();
 52:         mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
 53: 
 54:         // カメラの位置と視線方向からカメラの姿勢を変更
 55:         var view_to_gocs = this.viewer.camera.view_to_gocs;
 56:         mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
 57: 
 58:         // カメラのnear  farの設定
 59:         this.viewer.camera.near = 30;
 60:         this.viewer.camera.far = 500000;
 61:     }
 62: 
 63:     // シーンの読み込み
 64:     LoadScene() {
 65:         var scene_File_URL = "./data/glTFChangeAltitudeMode.json";
 66: 
 67:         // シーンを読み込む
 68:         var loader = new mapray.SceneLoader(this.viewer.scene, scene_File_URL, {
 69:             transform: (url, type) => this.onTransform(url, type),
 70:             callback: (loader, isSuccess) => {
 71:                 this.onLoadScene(loader, isSuccess);
 72:             }
 73:         });
 74: 
 75:         loader.load();
 76:     }
 77: 
 78:     onTransform(url, type) {
 79:         return {
 80:             url: url,
 81:             credentials: mapray.CredentialMode.SAME_ORIGIN,
 82:             headers: {}
 83:         };
 84:     }
 85: 
 86:     onLoadScene(loader, isSuccess) {
 87:         if (isSuccess) {
 88:             this.UpdateModelPosition();
 89:         }
 90:     }
 91: 
 92:     UpdateModelPosition() {
 93:         // sceneのEntityを取得
 94:         var entity = this.viewer.scene.getEntity(0);
 95: 
 96:         // 高度モードを設定
 97:         entity.altitude_mode = this.altitude_mode;
 98: 
 99:         // モデルの位置を設定
100:         entity.setPosition(this.model_Point);
101: 
102:         // モデルの回転
103:         entity.setOrientation(new mapray.Orientation(130, -90, 0));
104: 
105:         // モデルのスケールを設定
106:         entity.setScale([0.2, 0.2, 0.2]);
107:     }
108: 
109:     ChangeAltitudeMode() {
110:         // プルダウンの値取得
111:         var altitude_mode_Value = document.getElementById("AltitudeModePullDown").value;
112: 
113:         // プルダウンの値を設定
114:         this.altitude_mode = altitude_mode_Value;
115: 
116:         switch ( altitude_mode_Value ) {
117:             case mapray.AltitudeMode.ABSOLUTE.id:
118:                     this.altitude_mode = mapray.AltitudeMode.ABSOLUTE;
119:                 break;
120:             case mapray.AltitudeMode.RELATIVE.id:
121:                     this.altitude_mode = mapray.AltitudeMode.RELATIVE;
122:                 break;
123:             case mapray.AltitudeMode.CLAMP.id:
124:                 this.altitude_mode = mapray.AltitudeMode.CLAMP;
125:                 break;
126:         }
127: 
128:         this.UpdateModelPosition();
129:     }
130: 
131:     ChangeHeight() {
132:         // プルダウンの値取得
133:         var height_Value = parseFloat(document.getElementById("HeightPullDown").value);
134: 
135:         // プルダウンの値を設定
136:         this.model_Point.altitude = height_Value;
137: 
138:         this.UpdateModelPosition();
139:     }
140: 
141: }
142: 
143: function CreateChangeAltitudeModeInstance(container) {
144:     change_altitude_mode = new ChangeAltitudeMode(container);
145: }
146: 
147: function AltitudeModeValueChanged() {
148:     change_altitude_mode.ChangeAltitudeMode()
149: }
150: 
151: function HeightValueChanged() {
152:     change_altitude_mode.ChangeHeight()
153: }

1.4. シーンファイル（glTFChangeAltitudeMode.json）

 1: {
 2:   "model_register": { "model-0": { "link": "./plane/scene.gltf" } },
 3:   "entity_list": [{
 4:     "type": "model",
 5:     "mode": "basic",
 6:     "transform": { "position": [140.379528, 35.758832, 40.0] },
 7:     "ref_model": "model-0",
 8:     "altitude_mode": "absolute"
 9:     }
10:   ]
11: }

2. htmlのサンプルコードの詳細

htmlのサンプルコードの詳細を以下で解説します。

2.1. htmlの文字コード設定

4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。

4: <meta charset="utf-8">

2.2. タイトルの設定

5行目でタイトルの設定をします。このサンプルコードでは、ChangeAltitudeModeSampleを設定します。

5: <title>ChangeAltitudeModeSample</title>

2.3. JavaScriptファイルのパス設定

6～8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、高度モードを変えるJavaScriptファイル（ ChangeAltitudeMode.js ）を設定します。高度モードを変えるJavaScriptファイルの文字コードはutf-8に設定します。

6: <script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
7: <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
8: <script src="ChangeAltitudeMode.js" charset="utf-8"></script>

2.4. スタイルの設定

9～57行目で表示する要素のスタイルを設定します。このサンプルコードでは、下記のスタイルを設定します。

html
body
select
p
input
div#mapray-container（地図表示部分）
div#AltitudeModeBox（高度の設定方法変更コンボボックス表示部分）
div#HeightBox（高さ変更コンボボックス表示部分）

 9: <style>
10:     html, body {
11:         height: 100%;
12:         margin: 0;
13:         background-color:#E0E0E0;
14:     }
15: 
16:     select{
17:         height:22px;
18:         vertical-align:middle;
19:         font-size:13px;
20:         margin-left:10px;
21:     }
22: 
23:     p {
24:         margin-left:5px;
25:         font-size:13px;
26:     }
27: 
28:     input{
29:         margin-left:10px;
30:     }
31: 
32:     div#mapray-container {
33:         display: flex;
34:         position: relative;
35:         height: calc(100% - 34px);
36:     }
37: 
38:     div#AltitudeModeBox{
39:         display: flex;
40:         background-color:#E0E0E0;
41:         height: 32px;
42:         width: 200px;
43:         float:left;
44:         border:inset 1px #000000;
45:         align-items:center;
46:     }
47: 
48:     div#HeightBox{
49:         display: flex;
50:         background-color:#E0E0E0;
51:         height: 32px;
52:         width: 110px;
53:         float:left;
54:         border:inset 1px #000000;
55:         align-items:center;
56:     }
57: </style>

2.5. loadイベントの設定

画面を表示するときに、高度モード変更クラスを生成します。そのため、60行目でページ読み込み時に、高度モードを変更するクラスのインスタンスを生成する関数（ CreateChangeAltitudeModeInstance ）を呼ぶように設定します。高度モードを変更するクラスのインスタンスを生成する関数は、JavaScriptのサンプルコードの詳細で説明します。

60: <body onload="CreateChangeAltitudeModeInstance('mapray-container');">

2.6. 地図表示部分の指定

61行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

61: <div id="mapray-container"></div>

2.7. 高度の設定方法変更のUI

63～70行目で高度の設定方法変更コンボボックス表示部分のブロックを記述します。このブロックの中には、高度の設定方法を変更するコンボボックスを用意します。このサンプルコードでは、ABSOLUTE、RELATIVE、CLAMPを設定します。高度の設定方法を変更するコンボボックスが変更された時のイベント（onchange）に、高度の設定方法変更のコンボボックス変更時に呼び出す関数（ AltitudeModeValueChanged ）を設定します。高度の設定方法変更のコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。

63: <div id="AltitudeModeBox">
64:         <p>Altitude Mode</p>
65:         <select name="AltitudeModePullDown" id="AltitudeModePullDown" onchange="AltitudeModeValueChanged()">
66:             <option value="ABSOLUTE">ABSOLUTE</option>
67:             <option value="RELATIVE">RELATIVE</option>
68:             <option value="CLAMP">CLAMP</option>
69:         </select>
70: </div>

2.8. 高さ変更のUI

72～79行目で高さ変更ボタン表示部分のブロックを記述します。このブロックの中には、このブロックの中には、高さを変更するコンボボックスを用意します。このサンプルコードでは、0、40、100を設定します。高さを変更するコンボボックスが変更された時のイベント（onchange）に、高さのコンボボックス変更時に呼び出す関数（ HeightValueChanged ）を設定します。高さのコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。

72: <div id="HeightBox">
73:         <p>Height</p>
74:         <select name="HeightPullDown" id="HeightPullDown" onchange="HeightValueChanged()">
75:             <option value=0>0</option>
76:             <option value=40 selected>40</option>
77:             <option value=100>100</option>
78:         </select>
79: </div>

3. JavaScriptのサンプルコードの詳細

JavaScriptのサンプルコードの詳細を以下で解説します。

3.1. クラスとグローバル変数の説明

3～141行目でモデルの高度の設定方法を変更するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。また、1行目でモデルの高度の設定方法を変更するクラスのグローバル変数を定義します。

var change_altitude_mode;

class ChangeAltitudeMode {

  //中略

}

3.2. コンストラクタ

4～28行目がモデルの高度の設定方法を変更するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、glTFモデルの出典情報を追加します。そして、カメラの位置・向きの設定、シーンの読み込みの順にメソッド呼び出します。mapray.Viewerのベース地図の画像プロバイダは、画像プロバイダの生成メソッドで取得した画像プロバイダを設定します。 mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

 4: constructor(container) {
 5:     // Access Tokenを設定
 6:     var accessToken = "<your access token here>";
 7: 
 8:     // Viewerを作成する
 9:     this.viewer = new mapray.Viewer(
10:         container, {
11:             image_provider: this.createImageProvider(),
12:             dem_provider: new mapray.CloudDemProvider(accessToken)
13:         }
14:     );
15: 
16:     // glTFモデルのライセンス表示
17:     this.viewer.attribution_controller.addAttribution( {
18:         display: "Plane by osmosikum: Creative Commons - Attribution",
19:         link: "https://sketchfab.com/3d-models/plane-cedc8a07370747f7b0d14400cdf2faf9"
20:     } );
21: 
22:     this.model_Point = new mapray.GeoPoint(140.379528, 35.758832, 40.0);    //モデルの球面座標(経度、緯度、高度)
23:     this.altitude_mode = mapray.AltitudeMode.ABSOLUTE;
24: 
25:     this.SetCamera()
26: 
27:     this.LoadScene();
28: }

3.3. 画像プロバイダの生成

31～34行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

30: // 画像プロバイダを生成
31: createImageProvider() {
32:     // 国土地理院提供の汎用的な地図タイルを設定
33:     return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } );
34: }

3.4. カメラの位置・向きの設定

37～61行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

36: // カメラ位置の設定
37: SetCamera() {
38:     // 球面座標系（経度、緯度、高度）で視点を設定。成田国際空港付近
39:     var home_pos = { longitude: 140.379528, latitude: 35.758832, height: 40 };
40: 
41:     // 球面座標から地心直交座標へ変換
42:     var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
43:     var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
44: 
45:     // 視線方向を定義
46:     var cam_pos = mapray.GeoMath.createVector3([-500, -1500, 500]);
47:     var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
48:     var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
49: 
50:     // ビュー変換行列を作成
51:     var view_to_home = mapray.GeoMath.createMatrix();
52:     mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
53: 
54:     // カメラの位置と視線方向からカメラの姿勢を変更
55:     var view_to_gocs = this.viewer.camera.view_to_gocs;
56:     mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
57: 
58:     // カメラのnear、farの設定
59:     this.viewer.camera.near = 30;
60:     this.viewer.camera.far = 500000;
61: }

3.5. シーンのロード

64～76行目がシーンのロードメソッドです。シーンのロードは、ヘルプページ『glTFモデルの表示（SceneLoaderを使った表示）』を参照してください。

63: // シーンの読み込み
64: LoadScene() {
65:     var scene_File_URL = "./data/glTFChangeAltitudeMode.json";
66: 
67:     // シーンを読み込む
68:     var loader = new mapray.SceneLoader(this.viewer.scene, scene_File_URL, {
69:         transform: (url, type) => this.onTransform(url, type),
70:         callback: (loader, isSuccess) => {
71:             this.onLoadScene(loader, isSuccess);
72:         }
73:     });
74: 
75:     loader.load();
76: }

3.6. リソース要求変換

78～84行目がリソース要求変換メソッドです。リソース要求変換は、ヘルプページ『glTFモデルの表示（SceneLoaderを使った表示）』を参照してください。

78: onTransform(url, type) {
79:     return {
80:         url: url,
81:         credentials: mapray.CredentialMode.SAME_ORIGIN,
82:         headers: {}
83:     };
84: }

3.7. シーンのロード終了イベント

86～90行目がシーンのロード終了イベントメソッドです。引数のisSuccessには、読み込み結果が格納されており、trueの場合のみ読み込んだglTFモデルを表示し、glTFモデルを操作できるようにします。 glTFモデルのロード成功可否をtrueにし、glTFモデルの表示位置を設定するメソッドを呼び出します。glTFモデルの表示位置を設定するメソッドの詳細は後述します。

86: onLoadScene(loader, isSuccess) {
87:     if (isSuccess) {
88:         this.UpdateModelPosition();
89:     }
90: }

3.8. glTFモデルの表示位置の設定

92～107行目がglTFモデルの表示位置の設定メソッドです。高度の設定方法の設定、モデルの表示位置、向き、スケールをモデルのエンティティに反映します。 97行目で高度の設定方法を、101行目でモデルの表示位置を、103行目でモデルの向きを、106行目でモデルのスケールをそれぞれ設定します。なお、読み込んだモデルは1つ目のエンティティとなるため、エンティティ取得時の引数には0を指定します。

 92: UpdateModelPosition() {
 93:     // sceneのEntityを取得
 94:     var entity = this.viewer.scene.getEntity(0);
 95: 
 96:     // 高度モードを設定
 97:     entity.altitude_mode = this.altitude_mode;
 98: 
 99:     // モデルの位置を設定
100:     entity.setPosition(this.model_Point);
101: 
102:     // モデルの回転
103:     entity.setOrientation(new mapray.Orientation(130, -90, 0));
104: 
105:     // モデルのスケールを設定
106:     entity.setScale([0.2, 0.2, 0.2]);
107: }

3.9. 高度の設定方法の変更

109～129行目が高度の設定方法の変更メソッドです。111行目で高度の設定方法を変更するコンボボックスから文字列を取得します。そして、114～126行目で取得した文字列を高度の設定方法として設定し、128行目でglTFモデルの表示位置の設定を呼び出します。

109: ChangeAltitudeMode() {
110:     // プルダウンの値取得
111:     var altitude_mode_Value = document.getElementById("AltitudeModePullDown").value;
112: 
113:     // プルダウンの値を設定
114:     this.altitude_mode = altitude_mode_Value;
115: 
116:     switch ( altitude_mode_Value ) {
117:         case mapray.AltitudeMode.ABSOLUTE.id:
118:                 this.altitude_mode = mapray.AltitudeMode.ABSOLUTE;
119:             break;
120:         case mapray.AltitudeMode.RELATIVE.id:
121:                 this.altitude_mode = mapray.AltitudeMode.RELATIVE;
122:             break;
123:         case mapray.AltitudeMode.CLAMP.id:
124:             this.altitude_mode = mapray.AltitudeMode.CLAMP;
125:             break;
126:     }
127: 
128:     this.UpdateModelPosition();
129: }

3.10. 高さの変更

131～139行目が高さの変更メソッドです。133行目で高さを変更するコンボボックスから値を取得し、136行目で高さの値として設定します。その後、138行目でglTFモデルの表示位置の設定を呼び出します。

131: ChangeHeight() {
132:     // プルダウンの値取得
133:     var height_Value = parseFloat(document.getElementById("HeightPullDown").value);
134: 
135:     // プルダウンの値を設定
136:     this.model_Point.altitude = height_Value;
137: 
138:     this.UpdateModelPosition();
139: }

3.11. 高度の設定方法変更クラスのインスタンス生成

143～145行目の関数は、引数として渡されるブロックのidを利用して、高度の設定方法変更クラスのインスタンスを生成します。

143: function CreateChangeAltitudeModeInstance(container) {
144:     change_altitude_mode = new ChangeAltitudeMode(container);
145: }

3.12. 高度の設定方法変更時のイベント

147～149行目の関数は、高度の設定方法変更時に呼ばれ、高度の設定方法変更クラスの高度の設定方法変更メソッドを呼び出します。

147: function AltitudeModeValueChanged() {
148:     change_altitude_mode.ChangeAltitudeMode()
149: }

3.13. 高さ変更時のイベント

151～153行目の関数は、高さ変更時に呼ばれ、高度モード変更クラスの高さ変更メソッドを呼び出します。

151: function HeightValueChanged() {
152:     change_altitude_mode.ChangeHeight()
153: }

4. シーンファイルの詳細

シーンファイルの詳細を以下で解説します。なお、シーンファイルはJSON形式で記述します。

4.1. エンティティの設定

3行目でentity_listという名称でエンティティを定義し、その中にエンティティの詳細を定義します。4行目のtypeという名称は、エンティティの種類を表し、glTFモデルの場合はmodelを指定します。

{

  中略

  "entity_list": [{
    "type": "model",

      中略

    }
  ]
}

4.2. メッシュのデータ

2行目でmodel_registerという名称でモデルデータを定義します。このシーンファイルでは、モデルデータのIDをmodel-0とし、モデルファイルをファイルから読み込むために、linkという名称にglTFファイルのURLを指定します。

2: "model_register": { "model-0": { "link": "./plane/scene.gltf" } },

4.3. 汎用エンティティの設定

4～8行目で汎用エンティティの設定をします。汎用エンティティには以下の内容を定義します。

モード（mode）　⇒　basic
初期姿勢（transform）　⇒　球面座標系（position）での初期位置
モデルデータ（ref_model）　⇒　モデルデータのID（model-0）
高度モード（altitude_mode）　⇒　絶対値（absolute）

4: "type": "model",
5: "mode": "basic",
6: "transform": { "position": [140.379528, 35.758832, 40.0] },
7: "ref_model": "model-0",
8: "altitude_mode": "absolute"

5. 出力イメージ

このサンプルコードで初期状態（高度モード：ABSOLUTE、高さ：40）の出力イメージは下図のようになります。

初期状態から、高度モードをRELATIVEにした時の出力イメージは下図のようになります。

初期状態から、高度モードをCLAMPにした時の出力イメージは下図のようになります。

初期状態から、高さを100にした時の出力イメージは下図のようになります。