快捷導(dǎo)航

前端如何使用Cesium加載三維模型詳細攻略

更新時間：2024年05月25日 11:34:09 作者：Devil楓

三維模型數(shù)據(jù)格式種類多樣,常見的有DAE、OBJ、STL、3DS?MAX、CLM、IFC等數(shù)據(jù)格式,下面這篇文章主要給大家介紹了關(guān)于前端如何使用Cesium加載三維模型的相關(guān)資料,需要的朋友可以參考下

前言

想象一下，地球在你眼前旋轉(zhuǎn)，上面還有各種3D模型，是不是很酷？Cesium是一個超酷的庫，專門用來創(chuàng)建超炫的3D地球和地圖。好，言歸正傳，今天這篇文章就分享一下前端如何使用Cesium加載三維模型。

一：準備工作

首先，確保你已經(jīng)安裝了Cesium庫。可以從Cesium官網(wǎng)下載最新版本的庫文件，或者使用npm進行安裝：

npm install cesium
或者
yarn add cesium

然后，找一個舒服的地方坐下，準備好開始你的3D之旅

二：加載模型

要加載一個3D模型，你需要知道模型在哪里，然后告訴Cesium去哪里找它。就像你告訴外賣小哥你的地址一樣。然后，你就可以把這個模型加到你的地球上了！

// 創(chuàng)建你的Cesium Viewer  
let viewer = new Cesium.Viewer('cesiumContainer');  
  
// 定義模型的坐標和大小  
let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(  
    Cesium.Cartesian3.fromDegrees(-75.628982, 40.028194),   
    new Cesium.HeadingPitchRoll()   
);  
  
// 定義模型的路徑和其他選項  
let modelOptions = {  
    uri: 'path/to/your/model.gltf',   
    scale: 1.0,   
    minimumPixelSize: 128,   
    maximumScale: 20000,   
    modelMatrix: modelMatrix   
};  
  
// 把模型加到場景里！  
viewer.scene.primitives.add(new Cesium.Model(modelOptions));

我們首先創(chuàng)建了一個Cesium Viewer實例，然后定義了模型的路徑和選項。其中，modelMatrix參數(shù)用于定義模型的變換矩陣，包括位置、方向、俯仰和偏航角度等。然后，我們使用new Cesium.Model()構(gòu)造函數(shù)創(chuàng)建一個模型實例，并將模型添加到場景中。

當然別忘了把’path/to/your/model.gltf’替換成你自己的GLTF模型文件路徑哦！如果你有Blender或者其他的3D建模軟件，你可以導(dǎo)出為GLTF格式，然后放到你的項目里。建議用blender免費而且還比較好用。

三：交互和動畫

當然，加載模型只是第一步。你還可以和模型互動哦！比如你可以給模型添加碰撞檢測，這樣你就可以知道哪些地方可以“撞”到模型。就像玩虛擬現(xiàn)實游戲一樣！

首先，你需要定義一個碰撞器的形狀和大小。然后，你可以把這個碰撞器加到場景里，和你的模型一起顯示出來。就像給你的模型穿上盔甲一樣！

// 定義碰撞器的位置和尺寸  
var boxGeometry = new Cesium.BoxGeometry({  
    length: 100000, // 長度（單位：米）  
    width: 100000, // 寬度（單位：米）  
    height: 100000 // 高度（單位：米）  
});  
var boxMaterial = new Cesium.Material({  
    fabric: {  
        type: 'Grid', // 使用網(wǎng)格材質(zhì)類型  
        unlit: true // 不進行光照計算，僅顯示碰撞器輪廓線  
    }  
});  
var boxPrimitive = new Cesium.Primitive({ // 創(chuàng)建碰撞器實體對象  
    geometryInstances: new Cesium.GeometryInstance({ // 定義碰撞器幾何體實例  
        geometry: boxGeometry, // 使用BoxGeometry作為幾何體類型  
        modelMatrix: modelMatrix, // 設(shè)置模型變換矩陣，使其與模型對齊  
        id: 'box' // 設(shè)置碰撞器標識符，方便后續(xù)查找和識別碰撞事件  
    }),  
    asynchronous: false, // 是否異步加載碰撞器幾何體數(shù)據(jù)，這里選擇同步加載以提高性能和效率  
    material: boxMaterial // 設(shè)置碰撞器材質(zhì)屬性，這里使用網(wǎng)格材質(zhì)類型顯示輪廓線效果  
});  
viewer.scene.primitives.add(boxPrimitive); // 將碰撞器添加到場景中顯示出來。

四：其他api實例

就寫幾個我用到的吧。

1.地理信息查詢

當你想要查找某個地點的具體信息時，可以使用Cesium的地理信息查詢功能。例如，你可以通過經(jīng)緯度坐標或地名來查詢相關(guān)的地理信息

viewer.geocoder.geocode({  
    text: '北京',  
    view: Cesium.ScreenSpaceEventType.LEFT_CLICK  
}).then(function(results) {  
    // 查詢成功，獲取查詢結(jié)果  
    var entity = results[0].entity;  
    console.log(entity); // 輸出查詢到的實體信息  
});

2.軌跡繪制

如果你想要在地圖上繪制軌跡，可以使用Cesium提供的軌跡繪制工具。通過定義一系列的經(jīng)緯度坐標，你可以輕松地繪制出軌跡。

// 定義軌跡的坐標點數(shù)組  
var waypoints = [  
    Cesium.Cartesian3.fromDegrees(116.407, 39.904), // 北京  
    Cesium.Cartesian3.fromDegrees(121.473, 31.230), // 上海  
    Cesium.Cartesian3.fromDegrees(104.065, 30.574)  // 成都  
];  
  
// 創(chuàng)建軌跡實體  
var polyline = viewer.entities.add({  
    polyline: {  
        positions: waypoints,  
        width: 5,  
        material: Cesium.Color.RED,  
        leadTime: 0,  
        trailTime: 0  
    }  
});

定義一個包含經(jīng)緯度坐標的數(shù)組waypoints，表示軌跡上的點。然后，我們使用viewer.entities.add()方法創(chuàng)建了一個紅色的軌跡實體，并將其添加到地圖上。通過調(diào)整width參數(shù)可以改變軌跡的寬度，而leadTime和trailTime參數(shù)則分別控制軌跡的前導(dǎo)和尾跡時間

3.地理編碼

如果你有一系列的地名或地址，并想要獲取其對應(yīng)的經(jīng)緯度坐標，可以使用Cesium的地理編碼功能。通過地理編碼，你可以將地址轉(zhuǎn)換為準確的坐標位置

var viewer = new Cesium.Viewer('cesiumContainer');  
var encodedAddress = '北京市朝陽區(qū)'; // 需要地理編碼的地址或地名  
var request = {  
    address : encodedAddress, // 地址或地名字符串  
    resource : 'address' // 地理編碼資源類型，這里使用地址編碼資源類型（address）進行示范。如果使用地名編碼資源類型（geocode），需要傳遞地名相關(guān)的參數(shù)。例如：{ name : '北京' }。此外，還可以選擇其他資源類型（例如：postalCode、intersection等）。具體可參考Cesium官方文檔。  
};  
viewer.geocoder.geocode(request).then(function(results) {  
    // 地理編碼成功，獲取地理編碼結(jié)果（包含經(jīng)緯度坐標等）  
    var position = results[0].position; // 獲取第一個結(jié)果的經(jīng)緯度坐標位置信息，返回一個Cesium.Cartesian3對象。如果有多于一個結(jié)果，可以根據(jù)實際需求進行篩選或處理。例如：results[0].entity 等?？梢詤⒖糃esium官方文檔了解更多關(guān)于地理編碼結(jié)果的信息。使用經(jīng)緯度坐標信息進行后續(xù)操作，例如：繪制標記點、添加軌跡等。   
});