UP | HOME
  • mapray JSのオープンソースを公開しているGithub.comへのリンク

3Dデータ

ここでは、Mapray Cloudにアップロードした3Dデータを表示する例を示します。

1. 3Dデータのアップロード

Mapray Cloudの3Dデータセットページからアップロードします（解説ページ）。

現在 glTF 、 obj 形式に対応しています。複数テクスチャには対応していおりませんのでご注意ください。

アップロードする方法は下記2種類あります。

Portable Data
3Dモデルを任意の位置に配置するモードです。 座標値の単位はメートルで、原点周辺に分布しているようなデータです。
Geographic Data
モデルデータ自体が地理情報（位置情報）を持っているデータを配置するモードです。 現在、平面直角座標のみ対応しています。

今回は、Portable Dataのモデルをアップロードします。

2. 3Dデータの表示

src/index.js を下記のように修正します。

  • ACCESS_TOKEN に取得したMapray Cloudトークンを指定します。
  • USER_ID にユーザIDを指定します。
  • datasetId にアップロードしたデータセットのIDを指定します。
import mapray from "@mapray/mapray-js";
import maprayui from "@mapray/ui";

const ACCESS_TOKEN = "MTU*************************************";
const USER_ID = "567*************";

window.startApp = id => {
    const stdViewer = new maprayui.StandardUIViewer(id, ACCESS_TOKEN);

    const maprayApi = new mapray.cloud.CloudApiV1({
            basePath: "https://cloud.mapray.com",
            version: "v1",
            userId: USER_ID,
            token: ACCESS_TOKEN,
    });

    const datasetId = "576*************";
    const resource = maprayApi.get3DDatasetAsResource( [ datasetId ] );
    const loader = new mapray.SceneLoader( stdViewer.viewer.scene, resource, {
      onEntity: (loader, entity, prop) => {
        // リソースが 3Dデータセットなので、entity は ModelEntityクラスとなります。
        // onEntityを指定した場合は、entityの追加を手動で行う必要があります。
        stdViewer.addEntity(entity);

        // モデル位置にカメラを移動します
        const bounds = entity.getBounds();
        const length = bounds.getLatitudeDistance();
        stdViewer.startFlyCamera({
          time: 3.0,
          iscs_end: bounds.getCenter(),
          end_altitude: 5 * length,
          end_from_lookat: 5 * length,
        });
      }
    } );
    loader.load();
};

3. 実行結果

demo-3d.png

4. 関連するAPI