NICTA/cesium-simple-photogrammetry を使ってみる

【概要】

Cesium は、3次元の地図を Web ブラウザで表示するための JavaScript ライブラリである。NICTA/cesium-simple-photogrammetry は、写真測量で作成した 3次元オブジェクトのファイルを Cesium の地図へ取り込む例である。

【目次】

【関連する外部ページ】

【サイト内の関連情報】

前準備

Web サーバの開設

あらかじめ Web サーバを開設しておくこと。

  1. 下記の「NICTA/cesium-simple-photogrammetry の準備」でファイルを展開したディレクトリに、Windows のコマンドプロンプトで移動し、次のコマンドを実行する。これは Python の機能を使い、ポート 8000 番で Web サーバを開設するものである 
    python -m http.server
  2. Web ブラウザで http://127.0.0.1:8000 を開いて確認する
  3. 使い終わったら、コマンドプロンプトで Ctrl + C を押して Web サーバを止める

NICTA/cesium-simple-photogrammetry の準備

  1. Web ページを開く

    https://github.com/NICTA/cesium-simple-photogrammetry

  2. 「Code」ボタンを展開し、「Download ZIP」をクリックする
  3. .zip ファイルのダウンロードが始まる
  4. ダウンロードした .zip ファイルを展開（解凍）する
  5. 展開したファイルを Web サーバに置く。置いたときの URL を確認しておく。本資料では URL を「https://www.kkaneko.jp/a/cesium-simple-photogrammetry-master/」として説明を続ける
  6. 動作確認のため、次の URL を開く

    https://www.kkaneko.jp/a/cesium-simple-photogrammetry-master/

    3次元のオブジェクトが読み込まれる

3次元オブジェクトのファイルの地図への取り込み

NICTA/cesium-simple-photogrammetry のプログラムは 1 つの HTML ファイルだけである。ファイル中に、取り込む 3次元オブジェクトのファイル名と、地図上に配置する位置が記述されている。

  1. Web ブラウザで次を開く

    https://www.kkaneko.jp/a/cesium-simple-photogrammetry-master/

  2. HTML ファイルの中身を確認する

現行の CesiumJS で 3次元オブジェクトを取り込む

NICTA/cesium-simple-photogrammetry は 2015年ごろに公開されたものであり、リポジトリ内の ThirdParty/Cesium ディレクトリに当時の CesiumJS を同梱している。3次元オブジェクトが表示されない場合は、Cesium を使ってみるで入手した現行の CesiumJS を使い、次のプログラムで取り込む。

Cesium サーバの Apps ディレクトリに、次の内容の HTML ファイルを作成する。your_access_token の部分は、取得した Cesium ion のアクセストークンに置き換える（https://ion.cesium.com/tokens）。model.glb の部分は、取り込む 3次元オブジェクトのファイル名（glTF 形式または glb 形式）に置き換える。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>3D Object</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    const viewer = new Cesium.Viewer('cesiumContainer');
    const entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(133.3626, 34.4855, 30.0),
      model: { uri: 'model.glb' }
    });
    viewer.trackedEntity = entity;
  </script>
</body>
</html>

Cesium.Cartesian3.fromDegrees の引数は、経度、緯度、高さ（メートル）である。viewer.trackedEntity は、カメラを対象のオブジェクトに向けるものである。