今天说下cesium的实战，也就是我们之前说的那个，加载模型，外加旁边的相机显示出来
今天我们先说下怎么样加载模型，加载模型ceisum有加载的方法，但是如果加载gltf模型的话，和上次说的那样，会先加载过来之后才能显示，这样的话用户体验不太好，所以找到cesium里面有个tileset3d，加载的时候是分批加载的，所以今天说下这个
tileset3d用法地址：https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3d
用法：
vartileset=scene.primitives.add(newCesium.Cesium3DTileset({
url:'http://localhost:8002/tilesets/Seattle/tileset.json'
}));
这个Cesium3DTileset 有个方法，readyPromise,可以这样使用
这样写的话，相当于加载完这个tileset之后就立马添加到scene里面，然后把相机飞到模型那里
会有一个动画的效果，刚开始的时候就会飞到那里的效果，看起来还行，如果不想要有这个动画，也可以直接换成zoomTo到模型那里，就会没有动画
然后刚刚试了下，弄了一个模型，但是飞到那里之后一动鼠标就会乱掉，所以想了下，tileset应该要设置一个属性modelMatrix，官网的说明：A 4x4 transformation matrix that transforms the tileset's root tile.一个4x4转换矩阵，用于转换图块的根图块。我自己的理解就是模型的中心点偏移到的位置，也就是设置下中心点
设置完之后，模型就基本可以显示出来了，我这里设置的值是：Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(115, 35, 10))
上面的三个数字的参数就是经纬度和高度，设置之后就可以飞到你设置的经纬度了，高度的话，最好设置的能贴地，这样的话移动的时候会顺眼点舒服点。
我的项目是下载的我们公司的模型，一个娃娃，显示出来之后就是这样的：
如果你缩小一下屏幕，会发现稍微拉远一点就会模糊点，所以就看下需要怎么设置下了，看了下文档，知道里面有个参数，maximumScreenSpaceError，这个属性可以设置下用于驱动细节细化级别的最大屏幕空间错误。不知道是什么意思，自己的理解就是精细程度吧，我这里推荐大家可以设置为1，这样不关多大的模型，都会显示的非常清楚，但是太大的模型的话，分批加载，如果想要显示全部，就会需要点时间，但是这个模型操作什么的，都没有什么影响，这样用户体验会好点
然后想要把对于这个模型进行其他的属性操作或更改，可以直接对我上面写的那个tileset变量进行操作
比如现在我们公司有些需求，就是把这个模型给隐藏一下或者隐藏状态下显示下，这样的话，我们可以从他的属性里面找到一个show字段，里面设置下就会隐藏或显示了
好了，今天就先讲到这里了，明天继续，未完待续。。。。
欢迎大家关注微信公众号：web前端APP（ webqianduanAPP ）
不仅有前端和可视化，还有算法、源码分析、书籍相送
网友评论