09-27 02:00 阅读 77

Cesium用例

这篇文章源自一个需求：假设有一段管线，里面会有液体流动，根据温度的不同，通过改变管道的颜色，来显示此时管道内流动的液体的温度。这就需要动态的修改模型的颜色了。解决这个问题，我觉得需要首先解决模型的加载问题，刚开始，我选择了使用3dtiles格式进行加载，虽然成功的讲管线加载到了页面中，但是很难改变管道的颜色，3dtiles类似于静态的切片，需要使用额外的技术才能改变实体的颜色，比如单体化。后来，我想到了使用obj格式，但是好像Cesium不支持obj格式的加载。

参考文章：
1.cesium 添加model及其增删改 (这篇文章通过加载gltf模型，实现了点击屏幕，切换模型的位置的功能)
2.cesium点击获取entity的属性 (scene.pick接口实现entity的拾取)
3.cesium 3dtiles模型单体化点击高亮效果 (这篇文章也是在使用3dtiles的基础上，实现了点击某一个模型进行高亮的功能)
4.cesium 3DTILES 不同模型显示不同颜色 (这篇文章中提到了一个Cesium3DTileStyle，我觉得可以借助一下，实现有条件的渲染)
5.CesiumLab V1.4 分类3dtiles生成（倾斜单体化、楼层房间交互） (这篇文章使用了CesiumLab工具，实现了倾斜单体化的过程)

1.模型转换

参考文章：
1.Cesium.js 加载3D模型 (使用OpenCollada，讲obj转成dae，然后再转成gltf，和参考文章8有些类似)
2.Cesium官方教程7–三维模型 (这篇文章是系列教程中的一篇，只是加载了官方提供的glTF格式的模型，不过还是提供了一个在线的转换工具dae到gltf，没有具体的测试)
3.cesium模型加载-转换为gltf 加载fbx格式模型 (这篇文章主要是讲了使用多个工具，从fbx格式→dae格式→gltf格式→cesium加载gltf格式模型的过程)
4.cesium導入3D模型（obj轉gltf） (提供了一个工具obj2gltf，将obj转为gltf)
5.Cesium 学习（二）所支持的模型数据类型，以及转换 (粗略的概述了Cesium支持的目前所知的有glTF、glb、bgltf模型，以及相关方法的转换)
6.C2——cesium加载obj等常见BIM及问题 (主要提供了一个表，就是对比obj格式和gltf格式的大小以及再浏览器中加载的时间长短)

2.模型的加载

参考文章：
1.cesium加载3Dtiles数据 (如何加载3Dtiles模型)

3.3Dtiles颜色

使用了Cesium3DTileStyle，果真可以修改模型的颜色

<pre style="box-sizing: border-box; margin: 0px; padding: 0.6em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: pre; overflow-wrap: break-word; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 14px; line-height: 1.6; position: relative; border-radius: 0px 4px 4px 0px; background-color: rgb(40, 44, 52); color: rgb(189, 197, 197);">// 加载3d管道模型
var url="./resource/pipeline/tileset.json"
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url, //数据路径
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
}));
tileset.readyPromise.then(function(tileset) {
viewer.scene.primitives.add(tileset);

// 改变模型的颜色
var transparentStyle = new Cesium.Cesium3DTileStyle({
color : "color('red', 0.3)",
show : true
});
tileset.style=transparentStyle;
}).otherwise(function(error) {
console.log(error);
});
</pre>

还可以使用条件表达式

<pre style="box-sizing: border-box; margin: 0px; padding: 0.6em; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: pre; overflow-wrap: break-word; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 14px; line-height: 1.6; position: relative; border-radius: 0px 4px 4px 0px; background-color: rgb(40, 44, 52); color: rgb(189, 197, 197);">// floor为处理前的高度字段（原来是大写，但是要用小写，不知道什么原因）
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
[' ${floor} >= 8', 'rgba(45, 0, 75, 0.5)'], ['$ {floor} >= 7', 'rgb(102, 71, 151)'],
[' ${floor} >= 6', 'rgb(170, 162, 204)'], ['$ {floor} >= 5', 'rgb(224, 226, 238)'],
[' ${floor} >= 4', 'rgb(252, 230, 200)'], ['$ {floor} >= 3', 'rgb(248, 176, 87)'],
['${floor} >= 2', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)']
]
}
});
</pre>

基于以上的测试，那么就开始直接通过该命tileset.style来改变模型的整体效果了。

参考文章：
1.Cesium入门10 - 3D Tiles (这篇文章使用了Cesium3DTileStyle进行了样式的定制，并且举了多个例子)