Cesium中的坐标系、矩阵

3 篇文章 0 订阅
2 篇文章 0 订阅

1:cesium中支持载入3D模型,不过只支持gltf格式。gltf是khronos组织(起草OpenGL标准的那家)定义的一种交换格式,用于互联网或移动设备上展现3d内容,充分支持opengl,webgl,opengles图形加速标准。

    gltf目前可以由collada格式转换而来,官网上也提供了一个转换工具(https://www.khronos.org/gltf)。这个工具比较坑爹,只能和collada文件放在同一个目录才工作,转换后的结果文件也必须在同一目录,就是说不能指定输入和输出路径,当初坑了我好久才发现。

    一个collada文件转换后结果有4个文件,一个.bin,一个.json,两个.glsl。.json文件是描述性的文件,.bin是实际的数据,两个glsl文件是顶点着色语言文件。把这些文件所在目录部署到web服务器上。在client端添加

var ellipsoid = viewer.scene.globe.ellipsoid; var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lng, lat, height)); var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cart3); var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(rotate - 90)); var mat3 = Cesium.Matrix3.fromQuaternion(quat); var mat4 = Cesium.Matrix4.fromRotationTranslation(mat3, Cesium.Cartesian3.ZERO); var m = Cesium.Matrix4.multiplyTransformation(modelMatrix, mat4);//获得最终变换矩阵,参考笔者前面写的《坐标变换》篇 var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({ url : 'http://localhost:88/gltf/tower.json',//转换后4个文件中的json文件 modelMatrix : m, //添加模型的变换矩阵,才能显示在正确位置,否则打死也找不到,被放到地球的某个角落里 scale:1.0 //缩放倍数 })); //模型加载后,如果有动画就播放

model.readyToRender.addEventListener(function(model) { // Play and loop all animations at half-spead model.activeAnimations.addAll({ speedup : 0.5, loop : Cesium.ModelAnimationLoop.REPEAT }); });

2:

 转换到笛卡尔坐标系后就能运用计算机图形学中的仿射变换知识进行空间位置变换如平移旋转缩放。cesiumjs为我们提供了很有用的变换工具类,Cesium.Cartesian3(相当于Point3D)Cesium.Matrix3(3x3矩阵,用于描述旋转变换)Cesium.Matrix4(4x4矩阵,用于描述旋转加平移变换),Cesium.Quaternion(四元数,用于描述围绕某个向量旋转一定角度的变换)。下面举个例子:

      一个局部坐标为p1(x,y,z)的点,将它的局部坐标原点放置到loc(lng,lat,alt)上,局部坐标的z轴垂直于地表,局部坐标的y轴指向正北,并围绕这个z轴旋转d度,求此时p1(x,y,z)变换成全局坐标笛卡尔坐p2(x1,y1,z1)是多少?

var rotate = Cesium.Math.toRadians(d);//转成弧度 var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, rotate); //quat为围绕这个z轴旋转d度的四元数 var rot_mat3 = Cesium.Matrix3.fromQuaternion(quat);//rot_mat3为根据四元数求得的旋转矩阵 var v = new Cesium.Cartesian3(x, y, z);//p1的局部坐标 var m = Cesium.Matrix4.fromRotationTranslation(rot_mat3, Cesium.Cartesian3.ZERO);m2为旋转加平移的4x4变换矩阵,这里平移为(0,0,0),故填个Cesium.Cartesian3.ZERO m = Cesium.Matrix4.multiplyByTranslation(m, v);//m = m X v var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lng, lat, alt)); //得到局部坐标原点的全局坐标 var m1 = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);//m1为局部坐标的z轴垂直于地表,局部坐标的y轴指向正北的4x4变换矩阵 m = Cesium.Matrix4.multiplyTransformation(m, m1);//m = m X m1 var p2 = Cesium.Matrix4.getTranslation(m);//根据最终变换矩阵m得到p2 console.log('x=' + p2.x + ',y=' + p2.y + ',z=' + p2.z );

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值