关于加载3d tile模型数据及修改坐标

迈不过友情╰ 2023-07-11 12:42 56阅读 0赞

3d tile模型是倾斜摄影模型，导出的坐标可能不对，或者坐标需要调整

### Cesium下如何加载、修改3d tile模型的海拔及经纬度 ###

方案一、加载的同时，指定变换矩阵进行修改

const url = '/local/3dtile.json'
    const x = [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,1] // 这里的实际上不是这个1矩阵
    const modelMatrix = new Cesium.Matrix4(...x)
    const tileset = new Cesium.Cesium3DTileset({ 
          url,
          maximumScreenSpaceError: 1, 
          maximumNumberOfLoadedTiles:  1000,
          modelMatrix
        })
    viewer.scene.primitives.add(tileset)

> 代码分析：  
> `modelMatrix` 需要提前获取，如何获取见下文`如何获取需要的变换矩阵`  
> `this._viewer.scene.primitives.add(tileset)` 执行完成后，返回`titleset`本身  
> 注意： `modelMatrix` 的变化貌没法让3d tile 绕自身中心的坐标进行旋转，什么原因没找到，实际测试过多次没实现。猜测有可能是模型的相对坐标就正好是世界坐标，所以，发现无论怎么调整这个`modelMatrix`发现都有问题（通过`Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading)` 获得的旋转矩阵，貌似旋转中心，在世界坐标系的x y z轴上，所以看起来，旋转的角度特别大）。

> 也可以直接 `tileset.modelMatrix=modelMatrix` 与上面的效果是样的，这也提供了一种加载后，动态修改3d tile的坐标的方法

> 用这种方法去实现修改位置时，主要是通过使用旋转（矩阵中主要是旋转变换）来实现模型的位置修改的，因为旋转中心是世界坐标，所以旋转矩阵的效果就是在地表进行大圆移动。而如果矩阵中有平移变换的话，那么，貌似又好像是相对模型中心进行平移的。

方案二、加载完成后，在加载完成的回调中、或后续作动态修改(常用)  
下面实现，指定经纬度、海拔来修改3d tile模型

const url = '/local/3dtile.json'
    const pos = { lng:110.0, lat:22.1, alt:100}
    const tileset = new Cesium.Cesium3DTileset({ 
          url,
          maximumScreenSpaceError: 1, 
          maximumNumberOfLoadedTiles:  1000,
        })
     
    tileset.readyPromise.then(modifyPos)
    viewer.scene.primitives.add(tileset)
    
    const modifyPos = ()=>{ 
    	const { lng, lat, alt } = pos
        const position = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
        const mat = Cesium.Transforms.eastNorthUpToFixedFrame(position)
        /* const heading = 45 // 绕X轴角度 const A = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(heading)) const rotationX = Cesium.Matrix4.fromRotationTranslation(A); Cesium.Matrix4.multiply(mat, rotationX, mat) */
        tileset.root.transform = mat;
    }

> 代码分析  
> `Cesium.Transforms.eastNorthUpToFixedFrame(position)` 是世界坐标到某点的局部坐标的变换获取  
> 关键是`tileset.root.transform = mat` ，使用模型平移变换，上面已经获取了世界坐标到局部指定点的变换了，将该变换给到tileset，即可实现模型移动到指定点

> 注意：上面代码中，有一段注释，该段的内容为获取绕X轴的旋转矩阵，这也是网上很多所谓可实现平移+旋转的方法，但是，实际只有平移有效，即使该变换矩阵包含旋转的内容，也只有平移生效。`tileset.root.transform` 显然，只能改变平移  
> 如何上面回调中获取的矩阵该直接给`tileset.modelMatrix = mat`，你会发现，你的模型飞去很远很远的外太空，直接对`modelMatrix` 进行修改，可以理解为相对平移，而`Cesium.Transforms.eastNorthUpToFixedFrame(position)` 是世界坐标中心到指定点的平移，显然这个移动是很大的。

##### 两种方式的总结 #####

上面两种方式都有点怪异：  
方法一、可实现绕地球旋转（不可绕自身旋转），但是旋转中心在世界坐标系中心，也就是相当于绕地表进行旋转，最后的效果等效于实现位置修改；而平移的平移中心又好像在模型中心

方法二、不可实现旋转变换，可实现正确平移，任意指定经纬度海拔，实现定位

### 如何获取需要的变换矩阵 ###

前面第一种方法实现经纬度的定位关键是要获取`modelMatrix`，那怎么获取呢？  
手动调整，一点点测试  
默认情况下`tileset.modelMatrix = Cesium.Matrix4.IDENTITY` (就是对角1) ，下面提供一种方法实现模型的位置调整，然后，打印modelMatrix的值，再把该值写在代码中

offset = (type, value=0.0001) =>{ 
         const m = tileset.modelMatrix
         let m1
         if(type==='x') m1 = Cesium.Matrix3.fromRotationX(value)
         if(type==='y') m1 = Cesium.Matrix3.fromRotationY(value)
         if(type==='z') m1 = Cesium.Matrix3.fromRotationZ(value)
         Cesium.Matrix4.multiplyByMatrix3(m, m1, m)
         tileset.modelMatrix = m
         console.log(tileset.modelMatrix)
    }

> 注意： Cesium.Matrix4.multiplyByMatrix3(mat4, mat3, mat4) 第一个参数是4阶矩阵

上面的第二种方法，则可直接初步设置一个大该位置的坐标，然后，通过修改position坐标，并通过`Cesium.Transforms.eastNorthUpToFixedFrame(position)`重新计算新的矩阵，当然修改的position你需要自己记录好  
确定好正确的位置后，再把pos写到代码中

modifyPos = (newPos)=>{
    	const {lng, lat, alt } = newPos
        const position = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
        const mat = Cesium.Transforms.eastNorthUpToFixedFrame(position)
        tileset.root.transform = mat;
        console.log(newPos)
    }

> 无论如何，还没找到使用模型绕自身旋转的方法。或者说使坐标系移动到模型内部。这样对`tileset.modelMatrix`的修改，理论上就可以实现任意的变换了。（获取该倾斜摄影模型导出时坐标系没设置好，所以导致这样的问题）

### 遇到的坑 ###

1、 关于矩阵的坑  
通过`tileset.modelMatrix`输出的是一个16个元素的数组\[\]，在回写到代码中重构属性性需要注意，创建的4阶矩阵的元素排布问题

console.log(tileset.modelMatrix) // [x1,x2,x3,x4, y1,y2,y3,y4, z1,z2,z3,z4, o1,o2,o3,o4]
    m = new Cesium.Matrix4(
     x1, y1, z1, o1,
     x2, y2, z2, o2,
     x3, y3, z3, o3,
     x4, y4, z4, o4)

2、关于异步加载未完成时前，无法使用root属性的坑