「Cesium」を利用して、自宅の3Dモデルを表示

はじめに

「Cesium」を利用して、自宅の3Dモデルを表示してみました。3Dモデルは、最近勉強している、「blender」でglbを作成しました。

3Dモデルの表示は、「Cesium」のデモサイトを参考にして、すぐにできましたが、それぞれの角度の調整方法で手こずりました。

「Cesium」のデモサイトではほとんどか3Dモデルの角度設定にorientationのunitQuaternionを使って設定しているのですが、設定値が不明でうまくいきませんでした。

色々試したのですが、設定値が解明できなかったので、あきらめて、別のHeadingPitchRollクラスを使いました。このクラスではそれぞれの軸の角度を設定するだけなので、設定値が簡単に変更できました。

heading,pitch,rollにそれぞれの軸の角度を設定すると、3Dモデルが回転します。

htmlファイル(抜粋)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="../Build/CesiumUnminified/Widgets/widgets.css" />
    <script src="../Build/CesiumUnminified/Cesium.js"></script>
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer("cesiumContainer", {
          terrainProvider: Cesium.createWorldTerrain(),
        });
        viewer.entities.removeAll();
        createModel(133.XXXX,34.XXXXX, 61, "../Datas/house.glb");
        function createModel(lon,lat,h, url) {
          var position = Cesium.Cartesian3.fromDegrees(lon,lat,h);
          var heading = Cesium.Math.toRadians(150);
          var pitch = Cesium.Math.toRadians(0);
          var roll = Cesium.Math.toRadians(0);
          var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
          var orientation = Cesium.Transforms.headingPitchRollQuaternion(
            position,
            hpr
          );
          var entity = viewer.entities.add({
            name: url,
            position: position,
            orientation: orientation,
            model: {
              uri: url,
              scale: 2.4,
            },
          });
          viewer.trackedEntity = entity;
        }
    </script>
  </body>
</html>