cesium 实现 3d-tiles 平移旋转贴地

内容概览

1.基于cesium 实现 3d-tiles 平移旋转贴地
2.源代码 demo 下载

本篇实现 3d-tiles 平移旋转贴地，效果图如下：

实现思路：核心就是根据旋转、平移矩阵相乘来改变调整 3d-tiles 模型，利用 cesium 函数 Cesium.Matrix3.fromRotationX、Cesium.Matrix3.fromRotationY、Cesium.Matrix3.fromRotationZ、Cesium.Matrix4.fromRotationTranslation、Cesium.Matrix4.multiply等等

• 界面滑条动态调整模型位置：

      var buttonx1 = document.getElementById('buttonx-');
      var buttonx2 = document.getElementById('buttonx+');
      var buttonx3 = document.getElementById('buttony-');
      var buttonx4 = document.getElementById('buttony+');
      var sliderx = document.getElementById('slider-x');
      var sliderValuex = document.getElementById('slider-value-x');
      var slidery = document.getElementById('slider-y');
      var sliderValuey = document.getElementById('slider-value-y');
      var sliderHeight = document.getElementById('slider-Height');
      var sliderValueHeight = document.getElementById('slider-value-Height');
      var sliderRotateX = document.getElementById('slider-RotateX');
      var sliderValueRotateX = document.getElementById('slider-value-RotateX');
      var sliderRotateY = document.getElementById('slider-RotateY');
      var sliderValueRotateY = document.getElementById('slider-value-RotateY');
      var sliderRotateZ = document.getElementById('slider-RotateZ');
      var sliderValueRotateZ = document.getElementById('slider-value-RotateZ');
      window.onload = function (){
          buttonx1.addEventListener('click', function(e) {
              params.tx = params.tx - 0.0001;
              if (isNaN(params.tx)) {
                  return;
              }
              sliderValuex.textContent = params.tx;
              update3dtilesMaxtrix(tileset);
          });
          buttonx2.addEventListener('click', function(e) {
              params.tx = params.tx + 0.0001;
              if (isNaN(params.tx)) {
                  return;
              }
              sliderValuex.textContent = params.tx;
              update3dtilesMaxtrix(tileset);
          });
          sliderx.addEventListener('input', function(e) {
              sliderValuex.textContent = e.target.value;
              params.tx = Number(e.target.value);
              if (isNaN(params.tx)) {
                  return;
              }
              update3dtilesMaxtrix(tileset);
          });
  
          buttonx3.addEventListener('click', function(e) {
              params.ty = params.ty - 0.0001;
              if (isNaN(params.ty)) {
                  return;
              }
              sliderValuey.textContent = params.ty;
              update3dtilesMaxtrix(tileset);
          });
          buttonx4.addEventListener('click', function(e) {
              params.ty = params.ty + 0.0001;
              if (isNaN(params.ty)) {
                  return;
              }
              sliderValuey.textContent = params.ty;
              update3dtilesMaxtrix(tileset);
          });
          slidery.addEventListener('input', function(e) {
              sliderValuey.textContent = e.target.value;
              params.ty = Number(e.target.value);
              if (isNaN(params.ty)) {
                  return;
              }
              update3dtilesMaxtrix(tileset);
          });
  
          sliderHeight.addEventListener('input', function(e) {
              sliderValueHeight.textContent = e.target.value;
              params.tz = Number(e.target.value);
              if (isNaN(params.tz)) {
                  return;
              }
              update3dtilesMaxtrix(tileset);
          });
  
          sliderRotateX.addEventListener('input', function(e) {
              sliderValueRotateX.textContent = e.target.value;
              params.rx = Number(e.target.value);
              if (isNaN(params.rx)) {
                  return;
              }
              update3dtilesMaxtrix(tileset);
          });
  
          sliderRotateY.addEventListener('input', function(e) {
              sliderValueRotateY.textContent = e.target.value;
              params.ry = Number(e.target.value);
              if (isNaN(params.ry)) {
                  return;
              }
              update3dtilesMaxtrix(tileset);
          });
  
          sliderRotateZ.addEventListener('input', function(e) {
              sliderValueRotateZ.textContent = e.target.value;
              params.rz = Number(e.target.value);
              if (isNaN(params.rz)) {
                  return;
              }
              update3dtilesMaxtrix(tileset);
          });
      }
  

• 核心函数：

      params = {
          tx: 116.044332,  //模型中心X轴坐标（经度，单位：十进制度）
          ty: 30.110653,    //模型中心Y轴坐标（纬度，单位：十进制度）
          tz: 0,    //模型中心Z轴坐标（高程，单位：米）
          rx: 0,    //X轴（经度）方向旋转角度（单位：度）
          ry: 0,    //Y轴（纬度）方向旋转角度（单位：度）
          rz: 0      //Z轴（高程）方向旋转角度（单位：度）
      };
      //平移、贴地、旋转模型
      function update3dtilesMaxtrix(tileset) {
          //旋转
          var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
          var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
          var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
          var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
          var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
          var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
          //平移
          var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
          var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
          //旋转、平移矩阵相乘
          Cesium.Matrix4.multiply(m, rotationX, m);
          Cesium.Matrix4.multiply(m, rotationY, m);
          Cesium.Matrix4.multiply(m, rotationZ, m);
          //赋值给tileset
          tileset._root.transform = m;
      }
  

参考资料：

• www.jianshu.com/p/bc0c3f842…
• cesium.xin/wordpress/a…

link==>