Cesium載入3D模型

一、進入Cesium世界

在介紹如何載入3D模型之前，先來了解一下Cesium。Cesium是一個基於web的開源虛擬地球平台，它可以在瀏覽器上展示具有信息和交互性的全球環境。它還提供了許多功能，如2D和3D渲染、位置和方向的計算、圖形和地圖繪製等。與其他虛擬地球平台相比，Cesium通過其開放的API和易於使用的介面成為開發人員的首選。

想要在Cesium上載入3D模型，首先需要擁有一個Cesium上的場景。可以使用以下代碼創建一個簡單的Cesium場景：

var viewer = new Cesium.Viewer('cesiumContainer');

‘cesiumContainer’是一個div元素的id，表示把Cesium場景顯示在這個div元素中。這樣就可以在瀏覽器上看到一個基本的Cesium場景了。此時，我們可以通過創建一個URL或相對路徑來載入3D模型，然後將其添加到Cesium場景中。

二、載入模型

在Cesium中，使用Cesium的3D模型載入器來載入3D模型。可以使用以下代碼來載入一個3D模型：

var tileset = viewer.scene.primitives.add(Cesium.createTileset({
    url : '/path/to/tileset'
}));

其中URL是3D模型的路徑。此時，Cesium將自動載入模型資源，並將其轉化為適用於web顯示的格式。

在Cesium中，3D模型的概念是一個瓦片集合，它相當於一個由許多小塊瓷磚組成的地圖。Cesium場景中所有物體都是瓦片集合，這些物體可以根據距離顯示和隱藏，從而實現地形高度的動態縮放。

三、模型調整

我們可以通過調整模型來使其適應當前的場景。首先，可以使用以下代碼使模型的比例不變且位於Cesium場景中心：

Cesium.Matrix4.multiplyTransformation(Cesium.Transforms.eastNorthUpToFixedFrame(position), Cesium.Matrix4.fromScale(scale), modelMatrix);

其中，position是一個Cesium.Cartesian3類型的變數，表示模型的位置。scale是一個數字，表示模型的大小。modelMatrix是一個Cesium.Matrix4類型的變數，表示模型旋轉、縮放和位置的轉換矩陣。

此外，可以通過以下代碼來對模型進行旋轉：

var rotation = new Cesium.Matrix3.fromQuaternion(orientation);
var matrix = new Cesium.Matrix4.multiplyTransformation(modelMatrix, rotation, modelMatrix);

其中orientation是一個Quarternion類型的變數，表示模型需要繞y軸旋轉的弧度。Matrix3.fromQuaternion()方法將orientation轉化為矩陣，然後通過繞modelMatrix矩陣旋轉來改變模型的方向。

四、貼圖添加

將貼圖添加到3D模型的表面上非常容易，只需要在載入3D模型時在包含紋理的材質文件中明確指定紋理文件路徑即可：

"pbrMetallicRoughness" : {
    "baseColorTexture" : {
        "uri" : "texture.png"
    },
    "metallicFactor" : 0.0,
    "roughnessFactor" : 0.5
}

其中，uri是紋理文件的路徑。可以直接在3D建模軟體中指定紋理文件，並將其導出為.gltf或.glb文件。在Cesium場景中載入此模型後，將自動載入紋理文件並將其應用到模型表面上。

五、小結

本文介紹了如何在Cesium中載入3D模型，以及如何調整模型和添加貼圖。Cesium擁有一流的地球可視化技術，同時還具有靈活的API和易於使用的界面，非常適合3D地形和地圖開發。希望本文對讀者有所啟發。