コンテンツにスキップ

3D データセット

3D データセットは Mapray JS で使用できる 3D データを管理することができます。

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

  1. 「Datasets」ページの、「3D」タブから、「New 3D Dataset」ボタンをクリックします。

    datasets-3d_01

  2. ダイアログが表示されたら、必要事項を入力します。
    入力が完了したら「OK」ボタンをクリックします。

    プロパティ 説明
    Name 任意の名前を指定します。1文字以上128文字以下で入力してください。
    Description 任意の説明を指定します。300文字以下で入力してください。
    Attribution Info 帰属情報を指定します。
    File Type アップロードするフォーマットを指定します。
    サポートするフォーマットは glTF (.gltf)、obj (.obj) です。
    File Mode File Type が obj のとき設定できます。
    Portable Data は 3D モデルを任意の位置に配置するモードです。Geographic Data モデルデータ自体が地理情報 (位置情報) を持っているデータを配置するモードです。
    SRID File Mode が Geographic Data のとき、JGD2000 に対応した空間参照系を識別する ID を指定します。glTF は4326 (緯度・経度) しか対応していないため変更することはできません。
    Origin 緯度、経度、標高でモデルを配置する場所を指定します。
    Shadeless glTF 2.0 の Shadeless マテリアルのときチェックします。File Type が obj のとき設定できます。
    Adjust Orgin Center 原点の位置をバウンディングボックスの中心にするときチェックします。File Mode が Geographic Data のとき設定できます。
    Files File Type で指定したファイルを指定します。glTF は bin ファイルやテクスチャファイルが含まれるため、それら全てを含んだディレクトリを指定します。ドラッグ操作でディレクトリを指定するか、ドラッグ領域をクリックすることでシステムのファイル選択ダイアログから選択することができます。サポートファイル以外のファイルが含まれるとアップロードできませんので、チェックを外してください。
    Path 上記で指定したディレクトリの中で glTF ファイルへのパスを指定します。
    指定したディレクトリのルートに sample.glTF がある場合には、 /sample.glTF のように指定します。直接パスを入力するか、上記 Files を指定した際に表示されるディレクトリツリーから、対象の glTF をクリックすると自動的に入力されます。

    Mapray JSにおける座標系の詳細については、「モデルの表示に関連する座標系」を参照してください。

    datasets-3d_02

  3. アップロードに成功したら、下記のようにメッセージが表示され、リストに新しい項目が追加されます。
    この例では、アップロードしたデータセットの ID は 5201630030987264 で、後述する Mapray JS の Viewer で表示する際に指定する ID となります。

    datasets-3d_03

3D データセットの編集

「Name」、「Description」、「Attribution Info」、「Position」、「Pivot」、「Rotation」、「Scale」が編集できます。
編集画面では、アップロードした 3D データ、Mapray JS で使用するコードスニペットが確認できます。

  1. 編集したい 3D データセットの編集アイコンをクリックします。
    編集はコンバートが成功したときに可能です。

    datasets-3d_04

  2. 編集したら「Update」ボタンをクリックします。
    「Layout」タブをクリックすると 3D データ の表示に関する情報を編集できます。

    datasets-3d_05

    datasets-3d_06

3D データセットの削除

  1. 削除したい 3D データセットの削除アイコンをクリックします。
    削除はコンバートが成功、またはエラーのときに可能です。

    datasets-3d_07

  2. 確認ダイアログが表示されたら「OK」ボタンをクリックします。

    datasets-3d_08

3D データの表示

Mapray JS を使用して Mapray Cloud に保存された glTF データを読み込む例を示します。

  // let id = "<container id>";
  const stdViewer = new maprayui.StandardUIViewer(id, "<token>");
  const maprayApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
    token: "<token>",
  });
  const resource = maprayApi.get3DDatasetAsResource(["<id>"]);
  const loader = new mapray.SceneLoader(stdViewer.viewer.scene, resource, {
    onEntity: (loader, entity, prop) => {
      stdViewer.addEntity(entity);

      // Jump to the model.
      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();

<token> については作成したトークンの値に変更してください。 また、 <id> については、データアップロード時に確認したデータセット ID に変更してください。

screenshot-viewer-3d