這篇文章源自一個需求：假設(shè)有一段管線，里面會有液體流動，根據(jù)溫度的不同，通過改變管道的顏色，來顯示此時管道內(nèi)流動的液體的溫度。這就需要動態(tài)的修改模型的顏色了。解決這個問題，我覺得需要首先解決模型的加載問題，剛開始，我選擇了使用3dtiles格式進行加載，雖然成功的講管線加載到了頁面中，但是很難改變管道的顏色，3dtiles類似于靜態(tài)的切片，需要使用額外的技術(shù)才能改變實體的顏色，比如單體化。后來，我想到了使用obj格式，但是好像Cesium不支持obj格式的加載。

參考文章：
1.cesium 添加model及其增刪改 (這篇文章通過加載gltf模型，實現(xiàn)了點擊屏幕，切換模型的位置的功能)
2.cesium點擊獲取entity的屬性 (scene.pick接口實現(xiàn)entity的拾取)
3.cesium 3dtiles模型單體化點擊高亮效果 (這篇文章也是在使用3dtiles的基礎(chǔ)上，實現(xiàn)了點擊某一個模型進行高亮的功能)
4.cesium 3DTILES 不同模型顯示不同顏色 (這篇文章中提到了一個Cesium3DTileStyle，我覺得可以借助一下，實現(xiàn)有條件的渲染)
5.CesiumLab V1.4 分類3dtiles生成（傾斜單體化、樓層房間交互） (這篇文章使用了CesiumLab工具，實現(xiàn)了傾斜單體化的過程)

1.模型轉(zhuǎn)換

參考文章：
1.Cesium.js 加載3D模型 (使用OpenCollada，講obj轉(zhuǎn)成dae，然后再轉(zhuǎn)成gltf，和參考文章8有些類似)
2.Cesium官方教程7–三維模型 (這篇文章是系列教程中的一篇，只是加載了官方提供的glTF格式的模型，不過還是提供了一個在線的轉(zhuǎn)換工具dae到gltf，沒有具體的測試)
3.cesium模型加載-轉(zhuǎn)換為gltf 加載fbx格式模型 (這篇文章主要是講了使用多個工具，從fbx格式→dae格式→gltf格式→cesium加載gltf格式模型的過程)
4.cesium導(dǎo)入3D模型（obj轉(zhuǎn)gltf） (提供了一個工具obj2gltf，將obj轉(zhuǎn)為gltf)
5.Cesium 學習（二）所支持的模型數(shù)據(jù)類型，以及轉(zhuǎn)換 (粗略的概述了Cesium支持的目前所知的有g(shù)lTF、glb、bgltf模型，以及相關(guān)方法的轉(zhuǎn)換)
6.C2——cesium加載obj等常見BIM及問題 (主要提供了一個表，就是對比obj格式和gltf格式的大小以及再瀏覽器中加載的時間長短)

2.模型的加載

參考文章：
1.cesium加載3Dtiles數(shù)據(jù) (如何加載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; background-color: rgb(40, 44, 52); color: rgb(189, 197, 197); border-right: 1px solid rgb(223, 243, 125);">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</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);">// 加載3d管道模型
var url="./resource/pipeline/tileset.json"
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url, //數(shù)據(jù)路徑
maximumScreenSpaceError: 2, //最大的屏幕空間誤差
maximumNumberOfLoadedTiles: 1000, //最大加載瓦片個數(shù)
}));
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; background-color: rgb(40, 44, 52); color: rgb(189, 197, 197); border-right: 1px solid rgb(223, 243, 125);">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</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} >= 7', 'rgb(102, 71, 151)'],
['{floor} >= 5', 'rgb(224, 226, 238)'],
['{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進行了樣式的定制，并且舉了多個例子)