3dtiles平移旋转工具制作

3dtiles平移旋转缩放原理及可视化工具实现

背景

平时工作中，通过cesium平台来搭建一个演示场景是很常见的事情。一般来说，演示场景不需要多完善的功能，但是需要一批三维模型搭建，如厂房、电力设备、园区等。在实际搭建过程中，就会面临一个尴尬的问题，那就是模型定位，常规操作中，我们一般用三维模型的中心点对应一个经纬度坐标，以此转换成3dtiles格式，但是给定的经纬度坐标一般是模糊的大致位置，甚至有的场景不需要准确的坐标，只需要你找个合适的场景把各个模型搭建起来，这就不得不对模型进行微调位置，以适应场景。

• cesium中有对模型进行调整的代码，事实上，如果模型定位的位置不是我们想要的位置，可以通过修改该3dtiles的矩阵，来改变它，如平移：

  /**基于本地的ENU坐标系的偏移，也就是垂直于地表向上为Z，东为X，北为Y* @param tileset Cesium3DTileset* @param dx x轴偏移量。单位：米* @param dy y轴偏移量。单位：米* @param dz z轴偏移量。单位：米*/
  function translate(tileset: Cesium3DTileset, dx: number, dy: number, dz: number) {if (dx === 0 && dy === 0 && dz === 0) return// 对于3DTileset，我们需要的结果是一个模型矩阵，那么平移就是计算一个世界坐标下的平移矩阵。// 获取中心点const origin = tileset.boundingSphere.center// 以该点建立ENU坐标系const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin)// 该坐标系下平移后的位置const translatePosition = new Cartesian3(dx, dy, dz)// 获取平移后位置的世界坐标const worldPosition = Matrix4.multiplyByPoint(toWorldMatrix, translatePosition, new Cartesian3())// 计算世界坐标下的各个平移量const offset = Cartesian3.subtract(worldPosition, origin, new Cartesian3())// 从世界坐标下的平移量计算世界坐标的平移矩阵const translateMatrix = Matrix4.fromTranslation(offset)// 应用平移矩阵。这里应该与原本的模型矩阵点乘，而不是直接赋值tileset.modelMatrix = Matrix4.multiply(translateMatrix, tileset.modelMatrix, new Matrix4())
  }
  

  • 但是实际开发中，我们把一个模型准确的放在我们想要的位置上，或者调整其与底图对齐，需要多次进行一点一点的矫正，也就是说需要多次调用该函数，调整xyz平移参数，这样做十分麻烦，因此最好能做一个可视化控件，能够直接通过拖住的形式来调整模型，最后得出模型调整后的位置矩阵，然后在新一轮代码中，直接将模型的位置改为该位置矩阵，即可完成模型的调整。

    

功能开发

可视化控件

可视化控件，即我们看到的拖拽箭头，当平移时，是一个带箭头的三维坐标系的坐标轴，当是旋转时，是三个互相垂直的圆环；而这个可视化的开发，依靠cesium完全可以实现，因为cesium本身支持绘制图形，并且可以监听到鼠标是否划过和点击图形。

平移控件的显示

• 首先控件的显示需要思考的问题是，控件需要多大，控件的位置在哪里，显然，控件的大小需要根据模型的大小来制定，而控件的位置肯定就是模型的位置，因此，很自然我们需要创建一个函数，来在创建控件前获取模型的位置和根据模型范围制定控件大小。

   /*** 初始化参数和清理工具*/private initParam(): TransformOption {this.removeAllTools();const b3dm = this._b3dm;const viewer = this._viewer;const length = b3dm.boundingSphere.radius / 3;const originalMatrix = this._b3dm.root.transform.clone()const ps = new Cesium.Cartesian3();Cesium.Matrix4.getTranslation(originalMatrix,ps)let pos = CoordTransform.transformCartesianToWGS84(viewer,ps)this._params = {...this._params,tx: pos.lng,ty: pos.lat,tz: pos.alt ,};return {originDegree:pos,length,};}
  

  _params记录了6个参数，分别是tx,ty,tz和rx,ry,rz，它们可以用来记录当前模型的位置和姿态变化

  • 有了初始的位置参数和范围之后，我们就可以构建坐标系，首先是坐标轴，在构建坐标轴的时候，需要考虑到，坐标轴是三个正交的方向，但是每一个方向指向哪里？比如X轴指向哪里？

    • 事实上，X轴指向任意一个方向，我们都能轻易的构建出一个三个方向正交的坐标系，但是显然，不符合我们的操作习惯。

    • 首先，先做一个假设，如果是根据Cesium的世界坐标系的方向来建立坐标轴，是否可行？显然是不行的，假设一个模型处于地球表面，我们的习惯，依然是想按照朝东为X轴，朝北为Y轴，朝上为Z轴来移动物体，这种习惯和我们的经纬度的习惯是符合的，东西走向为经度走向，南北走向为维度走向，那么我们让物体按X轴移动，就是沿着经度走，按Y轴移动，就是沿着维度走

      

    • 而我们的Cesium的世界坐标系显然不是这种情况，如图所示，绿色坐标就是我们刚才说的坐标系，而蓝色坐标系，而是Cesium的世界坐标系，显然如果我们按照世界坐标系的方向建立坐标轴，当我们移动某个方向的时候，都会偏离出地球。

    

• 清楚了这一点，我们就可以按照图上绿色坐标系的形式建立坐标系，我们姑且称为局部坐标系，我们已经知道这个坐标系的原点的坐标了，也知道坐标系的范围了（可以理解为每个轴的长度），那么只需要求出每个轴的终点坐标就可以了，基于此，我们再创建一个getTransPosition函数，用来求终点坐标。

  	const { originDegree, length } = this.initParam();const translateCartesian = new Cesium.Cartesian3(length, length, length);const ps = CoordTransform.transformWGS84ToCartesian(this._viewer,originDegree)const targetDegree = this.getTransPosition(ps, translateCartesian);
  

  我们不需要求出每个轴的终点坐标，事实上只需要求出 translateCartesian这个向量的坐标就行了，然后每个轴的终点坐标，相当于向量坐标的分量，基于此，我们完善 getTransPosition函数

  /*** 根据平移距离获取目标点* @param originPosition - 原始位置（笛卡尔坐标）* @param translateCartesian - 平移向量（笛卡尔坐标）* @return 平移后的位置（经纬度坐标）*/private getTransPosition(originPosition: Cesium.Cartesian3,translateCartesian: Cesium.Cartesian3): { lng: number; lat: number; alt: number } {// 东-北-上参考系构造出4*4的矩阵const transform = Cesium.Transforms.eastNorthUpToFixedFrame(originPosition);//构造平移矩阵const m = new Cesium.Matrix4();Cesium.Matrix4.setTranslation(Cesium.Matrix4.IDENTITY,translateCartesian,m);//将当前位置矩阵乘以平移矩阵得到平移后的位置矩阵const modelMatrix = Cesium.Matrix4.multiply(transform, m, new Cesium.Matrix4());const finalPosition = new Cesium.Cartesian3();//从位置矩阵中获取坐标信息Cesium.Matrix4.getTranslation(modelMatrix, finalPosition);//转换为地理坐标系return CoordTransform.transformCartesianToWGS84(this._viewer,finalPosition);}
  

  这个思路很简单，首先根据原始位置创建一个局部坐标系，然后求出在局部坐标系下从（0，0，0）点平移到向量终点的平移矩阵，而局部坐标系下原点转到世界坐标系下也是一个矩阵，两个矩阵相乘即可求出向量终点在世界坐标系下的位置，也就是一个笛卡尔坐标，有了笛卡尔坐标，也就最终能算出向量终点的经纬度坐标

• 我们可以分析一下向量终点的经纬度坐标，这里简称终点坐标，假设为(lng1,lat1,alt1),而我们原点的坐标是(lng0,lat0,alt0)，那么很显然，我们能够得出，X轴的长度范围为 (lng0,lng1 ),其他轴也是如此。

• 因此，我们获取到了坐标系的起点，终点，长度等信息，自然而然，下一步可以建立坐标系了 this.initLineArrow(originDegree, targetDegree, length);

   /*** 绘制坐标轴* @param originDegree -原始坐标(经纬度)* @param targetDegree -目标坐标(经纬度)* @param length - 坐标轴长度*/private initLineArrow(originDegree: { lng: number; lat: number; alt: number },targetDegree: { lng: number; lat: number; alt: number },length: number): void {const arrows = new Cesium.PolylineCollection();//x轴（红色）const xPos = [originDegree.lng,originDegree.lat,originDegree.alt,targetDegree.lng,originDegree.lat,originDegree.alt,];this.drawArrow(arrows, "model_edit_xArrow", xPos, Cesium.Color.RED);//y轴（绿色）const yPos = [originDegree.lng,originDegree.lat,originDegree.alt,originDegree.lng,targetDegree.lat,originDegree.alt,];this.drawArrow(arrows, "model_edit_yArrow", yPos, Cesium.Color.GREEN);//z轴（蓝色）const zPos = [originDegree.lng,originDegree.lat,originDegree.alt,originDegree.lng,originDegree.lat,targetDegree.alt,];this.drawArrow(arrows, "model_edit_zArrow", zPos, Cesium.Color.BLUE);this._coordArrows = this._viewer.scene.primitives.add(arrows);if(this._coordArrows){this._coordArrows._name = "CoordAxis";}}
  

• 这里创建的x,y,z轴坐标明显就是两个点的连线，X轴是横跨经线的直线，Y轴是横跨纬线的直线，Z轴则是垂直地面的直线，且三个轴长度相等。然后，我们将每个轴坐标传入 drawArrow 函数，这里是最终实现坐标轴的代码，我们这里可以做一个思考，如果给每个坐标轴的终点，加上箭头，我们需要做两个操作，首先把坐标轴画出来，其次在该轴末尾画一个箭头，这样操作显然比较麻烦，尤其是画箭头，cesium有一个api已经实现了这个操作，只需要给出坐标，就能实现一条直线并且末尾带箭头，让我们完善这个代码

  /*** 绘制箭头* @param arrows - PolylineCollection集合* @param name - 箭头名称* @param positions - 箭头位置数组* @param color - 箭头颜色*/private drawArrow(arrows: Cesium.PolylineCollection,name: string,positions: number[],color: Cesium.Color): void {const arrow = arrows.add({positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),width: this._defaultWidth,material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType, {color: color,}),}) as EditablePolyline;arrow._name = name;}
  

  

至此，我们成功创建了坐标系轴，并且每个坐标系轴都赋予一个name属性，整个坐标系有一个整体name属性

旋转控件的实现

旋转控件的实现就比较简单，大致思路就是首先确定圆环的圆心（原点），其次插值求出一个圆环点，其次根据圆环点借助cesium中的api创建一个圆环，最后通过旋转把其它两个圆环创建出来，我们一步步剖析这个操作

• 根据最开始求得的模型的位置坐标和范围创建圆环坐标点，这里以原始坐标为圆心，以范围为半径，进行插值求点

   public editRotation(): void {const { originDegree, length } = this.initParam();this.createCircle(originDegree.lng,originDegree.lat,originDegree.alt,length);}
  

  /*** 创建旋转圆环*/private createCircle(lon: number,lat: number,height: number,radius: number): void {const positions: Cesium.Cartesian3[] = [];//生成圆形点位for (let i = 0; i <= 360; i += 3) {const sin = Math.sin(Cesium.Math.toRadians(i));const cos = Math.cos(Cesium.Math.toRadians(i));positions.push(new Cesium.Cartesian3(radius * cos, radius * sin, 0));}const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(lon, lat, height));//创建三个方向的旋转圆环this.createAxisCircles(positions, matrix);}
  

  这里同样以模型坐标为原点建立局部坐标系，然后插值计算了局部坐标系为圆心的圆的各个插值点坐标，接下来就是创建圆环

• 由于插值点是在XY平面的点，所以它构建的圆环可以刚好垂直Z轴，作为Z轴的旋转圆环，假设我们同时创建三个这样的圆环，只需要让其中一个圆环向Y轴方向旋转90度，即可得出Y轴旋转圆环，向X轴方向旋转90度，即可得出X轴旋转圆环，这里的旋转不能简单的只是旋转90度，要知道这个圆环是在局部坐标系下，要想变换成局部坐标系下的旋转90度，需要变换到世界坐标系下，再乘以旋转矩阵

  /*** 创建三个方向的旋转圆环*/private createAxisCircles(positions: Cesium.Cartesian3[],matrix: Cesium.Matrix4): void {//Z轴圆环const zCircle = this.createAxisSphere("model_edit_zCircle",positions,matrix,Cesium.Color.BLUE);this._viewer.scene.primitives.add(zCircle);//X轴圆环const yCircle = this.createAxisSphere("model_edit_yCircle",positions,matrix,Cesium.Color.RED);this._viewer.scene.primitives.add(yCircle);const yRotation = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(90)));Cesium.Matrix4.multiply((yCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix,yRotation,(yCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix);//Y轴圆环const xCircle = this.createAxisSphere("model_edit_xCircle",positions,matrix,Cesium.Color.GREEN);this._viewer.scene.primitives.add(xCircle);const xRotation = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90)));Cesium.Matrix4.multiply((xCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix,xRotation,(xCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix);}
  

• 而创建球体也很简单，当有了插值点后，直接借助cesium中的api进行画线即可，插值点越密，圆形越光滑

   /*** 创建坐标轴球体*/private createAxisSphere(name: string,positions: Cesium.Cartesian3[],matrix: Cesium.Matrix4,color: Cesium.Color): Cesium.Primitive {const primitive = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({id: name,geometry: new Cesium.PolylineGeometry({positions,width: 5,}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(color),},}),releaseGeometryInstances: false,appearance: new Cesium.PolylineColorAppearance({translucent: false,}),modelMatrix: matrix,}) as EditablePrimitive;primitive._name = name;this._coordCircle.push(primitive);return primitive;}
  

  

控件的销毁

我们实现了控件的创建，很显然让切换控件时，需要销毁当前控件，我们之前已经记录了每个控件，因此当销毁时，只需要拿到该控件，在primitives集合中去除即可

 /*** 移除所有工具*/private removeAllTools(): void {this.removeCoordArrows();this.removeCoordCircle();}/*** 移除坐标箭头*/private removeCoordArrows(): void {if (this._coordArrows) {this._viewer.scene.primitives.remove(this._coordArrows);this._coordArrows = undefined;}}/*** 移除坐标圆环*/private removeCoordCircle(): void {this._coordCircle.forEach((element) => {this._viewer.scene.primitives.remove(element);});this._coordCircle = [];}
}

实现控件拖动

不管是移动模型还是旋转模型，我们操作的逻辑都是需要鼠标左键按下，然后检测鼠标是否在控件上，如果是，则检测是否是否滑动，计算滑动的距离应用到模型变换上，然后检测鼠标左键抬起，整个过程结束。我们逐步分解一下

• 首先需要监听鼠标按下命令，如果按下后，再检测是否悬停在控件上，如果是，那就要锁定相机，避免鼠标移动地图拖动，然后让悬停的控件变粗，检测悬停位置的鼠标经纬度，如果在地球范围内，在继续进行后续操作

  /*** 初始化鼠标事件(移动，按下，抬起)*/private initEvent(): void {const viewer = this._viewer;this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);this._handler.setInputAction((event:Cesium.ScreenSpaceEventHandler.PositionedEvent) => {const pick = viewer.scene.pick(event.position);if (pick?.primitive?._name &&pick.primitive._name.indexOf("model_edit") !== -1) {//锁定相机viewer.scene.screenSpaceCameraController.enableRotate = false;this._currentPick = pick.primitive as EditablePrimitive;this._currentPick.width = 25;const downPos = viewer.scene.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);let _tx = 0,_ty = 0,_tz = 0;let _rx = 0,_ry = 0,_rz = 0;//防止点击到地球之外报错if (downPos && Cesium.defined(downPos)) {const downDegree = CoordTransform.transformCartesianToWGS84(viewer,downPos);//鼠标移动事件//  剩余操作}, Cesium.ScreenSpaceEventType.LEFT_DOWN);}
  

  然后在剩余操作里完善鼠标移动事件，其实不管是平移操作还是旋转操作，本质上都是鼠标移动，当是移动操作的时候，我们可以轻易的计算X轴移动距离和Y轴移动距离，只需要鼠标移动的末尾的经纬度减去最初鼠标点击的经纬度，即可算出差来，作为X轴移动的距离和Y轴移动的距离，但是移动Z轴的时候，我们发现鼠标依然是向上拖动的，也就是鼠标在竖向操作，类似于Y轴的移动逻辑，此时只需要求出鼠标滑动的距离。乘以一个系数，就可以得出Z轴移动的距离了。

    //鼠标移动事件this._handler.setInputAction((movement: Cesium.ScreenSpaceEventHandler.MotionEvent) => {if (!this._currentPick) return;  // 增加空值检查const endPos = viewer.scene.camera.pickEllipsoid(movement.endPosition,viewer.scene.globe.ellipsoid);if (endPos && Cesium.defined(endPos)) {const endDegree = CoordTransform.transformCartesianToWGS84(viewer,endPos);const _yPix = movement.endPosition.y - event.position.y;const _xPix = movement.endPosition.x - event.position.x;//根据当前选中控制器更新相应变量switch (this._currentPick._name) {case "model_edit_xArrow":_tx = endDegree.lng - downDegree.lng;break;case "model_edit_yArrow":_ty = endDegree.lat - downDegree.lat;break;case "model_edit_zArrow":_tz = -this._dStep * _yPix;break;case "model_edit_xCircle":_rx = this._rStep * _yPix;break;case "model_edit_yCircle":_ry = this._rStep * _xPix;break;case "model_edit_zCircle":_rz = this._rStep * _xPix;break;}this.updateModel(this._params, _tx, _ty, _tz, _rx, _ry, _rz);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  

  这里的movement.endPosition是屏幕坐标系，他是个二维坐标，用来判断鼠标横向滑动的距离和竖向滑动的距离，然后我们再来分析旋转的逻辑，也就是 _rx，_ry，_rz，让旋转X轴时，其实是鼠标竖向滑动，Y和Z轴则是横向滑动，我们分别计算一个滑动系数，最后更新模型

  /*** 更新模型位置*/private updateModel(params: EditParams,tx: number,ty: number,tz: number,rx: number,ry: number,rz: number): void {//创建旋转矩阵const rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx + rx)));const rotationY = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry + ry)));const rotationZ = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz + rz)));let position = Cesium.Cartesian3.fromDegrees(params.tx + tx,params.ty + ty,params.tz + tz )let matrix = Cesium.Transforms.eastNorthUpToFixedFrame(position)//旋转、平移矩阵相乘Cesium.Matrix4.multiply(matrix,rotationX,matrix)Cesium.Matrix4.multiply(matrix,rotationY,matrix)Cesium.Matrix4.multiply(matrix,rotationZ,matrix)//更新模型变换this._b3dm.root.transform = matrix;// //更新平移指示器if (this._coordArrows) {this.updateLineArrow(this._b3dm);}}
  

更新模型的操作很简单，分别求出旋转矩阵和平移矩阵，最后替换掉原有的矩阵，模型就发生变换了，这里需要注意的是，当模型发生平移后，可视化控件也需要跟着发生变换，此时需要更新可视化控件的位置，原理也很简单，重新求一下模型的位置，然后创建可视化控件即可

/*** 更新箭头指示器* @param b3dm - 3DTiles模型*/private updateLineArrow(b3dm: Cesium.Cesium3DTileset): void {//移除当前的箭头指示器this.removeCoordArrows();const viewer = this._viewer;//计算长度（使用包围球半径的1/3作为指示器长度）const length = b3dm.boundingSphere.radius / 3;const originalMatrix = this._b3dm.root.transform.clone()const ps = new Cesium.Cartesian3();Cesium.Matrix4.getTranslation(originalMatrix,ps)let originDegree = CoordTransform.transformCartesianToWGS84(viewer,ps)//创建平移向量（三个方向等长）const translateCartesian = new Cesium.Cartesian3(length, length, length);//深拷贝中心点位置const originPos = JSON.parse(JSON.stringify(ps));//计算目标点位置const targetDegree = this.getTransPosition(originPos, translateCartesian);//重新初始化箭头指示器this.initLineArrow(originDegree, targetDegree, length);}

• 最后是当鼠标滑动结束后，伴随而来的是鼠标抬起事件，在这个事件中需要记录模型变换后的姿态，重新解锁相机，移除掉鼠标移动的监听

//鼠标抬起事件this._handler.setInputAction(() => {if (!this._currentPick) return;  // 增加空值检查viewer.scene.screenSpaceCameraController.enableRotate = true;this._currentPick.width = this._defaultWidth;this._currentPick = undefined;//更新最新参数this._params.tx += _tx;this._params.ty += _ty;this._params.tz += _tz;this._params.rx += _rx;this._params.ry += _ry;this._params.rz += _rz;//移除事件监听this._handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);this._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);}, Cesium.ScreenSpaceEventType.LEFT_UP);}

以上就是所有流程的原理，主要是需要弄明白cesium世界坐标系和局部坐标系之间的变换以及鼠标移动对应的是哪个轴的操作。

最新参数
this._params.tx += _tx;
this._params.ty += _ty;
this._params.tz += _tz;
this._params.rx += _rx;
this._params.ry += _ry;
this._params.rz += _rz;

        //移除事件监听this._handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);this._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);}, Cesium.ScreenSpaceEventType.LEFT_UP);}

> 以上就是所有流程的原理，主要是需要弄明白cesium世界坐标系和局部坐标系之间的变换以及鼠标移动对应的是哪个轴的操作。