在 Altizure 官网,您可以下载“专业模型”,并且使用“Altizure桌面端”,转换成多种三维数据格式。本篇教程将引导您如何将altizure专业模型转换成3dtiles格式,然后在cesium中做初步的展示。

数据格式转换

首先打开altizure桌面端,设置输入路径(下载好的实景三维数据位置),输出路径,然后点击ok开始转换。
1bf11d49-b4ff-43b0-bb69-1402b3ecb5e7-image.png
转换完成的3dtiles,可以直接在cesium调用:
09d16165-3ee4-45f7-861b-212d407e54c9-image.png

创建cesium项目,加载模型

cesium调用3dtiles基本步骤:

  • 初始化viewer
  • 加载3dtiles(配置tileset.json路径)
  • 加载完成,视角移动到模型区域范围内
  • 如果模型出现y-z轴反转的情况,应用模型旋转

这里有一份最基本的cesium加载3dtiles案例,引用cesium 1.62版本。下载解压后,将3dtiles所在文件夹复制到案例根目录,修改tileset.json路径,即可托管服务演示:https://pan.baidu.com/s/1GaVzzVmcVxn9Bd-h6pAq-A
最基本的加载demo代码:

<body>
  <div id="cesiumContainer"></div>
  <script>
    // initialize the viewer
    var viewer = new Cesium.Viewer('cesiumContainer', {
      shadows: false
    });

    // let the model not occluded by terrain
    viewer.scene.globe.depthTestAgainstTerrain = false;

    // load 3dtiles
    var tileset = new Cesium.Cesium3DTileset({
      url: './cyt_3dtiles_3/tileset.json'
    });

    // after loaded, zoom to the model extent
    tileset.readyPromise.then(function (tileset) {
      viewer.scene.primitives.add(tileset);

      viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
    }).otherwise(function (error) {
      console.log(error);
    });


  </script>
</body>

关于模型旋转,由于cesium内部模型矩阵是相对地球球心的,因此需要经过 平移模型到球心->旋转模型->平移回到原来位置 这样的步骤。
绕X轴旋转模型90度代码:

      // rotate the model if necessary
      var rootTransform = tileset._root.transform;
      var rootTransformInv = Cesium.Matrix4.inverse(rootTransform, new Cesium.Matrix4());
      // write x, y, z rotate degrees here
      var rotateMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90)))
      var modelMatrix = new Cesium.Matrix4()
      Cesium.Matrix4.multiply(rootTransform, rotateMatrix, modelMatrix)
      Cesium.Matrix4.multiply(modelMatrix, rootTransformInv, modelMatrix)
      tileset.modelMatrix = modelMatrix

注意这段代码需要写在 tileset.readyPromise.then 里面。如果需要旋转其他角度,修改 Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90)) 即可。

cesium调用altizure模型:
bc3d0334-4dfe-4dae-a9ba-c44dde2b6ced-image.png
模型旋转后的效果:
d590b63b-5796-4120-8f06-8b8c7301975f-image.png

托管/发布cesium应用

到这里,关于开发的部分已经讲述完成了。开发完成的cesium项目,还需要托管到服务器或者发布本地服务,才可以浏览我们开发出来的成果。
经过测试,我们发现cesium在某些方法下不能正常发布,如(python -m SimpleHTTPServer)。验证后发现通过nginx或者iis托管cesium项目,用户是可以正常访问的。托管cesium的服务只需要基本的静态文件托管即可。