cesiumjs開發實踐 (七)

                                      3D模型

摘要

cesium中支持載入3D模型，不過只支持gltf格式。

     cesium中支持載入3D模型，不過只支持gltf格式。gltf是khronos組織（起草OpenGL標準的那家）定義的一種交換格式，用於互聯網或移動設備上展現3d內容，充分支持opengl，webgl，opengles圖形加速標準。

    gltf目前可以由collada格式轉換而來，官網上也提供了一個轉換工具(https://www.khronos.org/gltf)。這個工具比較坑爹，只能和collada文件放在同一個目錄才工作，轉換後的結果文件也必須在同一目錄，就是說不能指定輸入和輸出路徑，當初坑了我好久才發現。

    一個collada文件轉換後結果有4個文件，一個.bin,一個.json,兩個.glsl。.json文件是描述性的文件，.bin是實際的數據，兩個glsl文件是頂點着色語言文件。把這些文件所在目錄部署到web服務器上。在client端添加

var ellipsoid = viewer.scene.globe.ellipsoid;
var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lng, lat, height));
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);
var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(rotate - 90));
var mat3 = Cesium.Matrix3.fromQuaternion(quat);
var mat4 = Cesium.Matrix4.fromRotationTranslation(mat3, Cesium.Cartesian3.ZERO);
var m = Cesium.Matrix4.multiplyTransformation(modelMatrix, mat4);//獲得最終變換矩陣，參考筆者前面寫的《座標變換》篇	
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
		url : 'http://localhost:88/gltf/tower.json',//轉換後4個文件中的json文件
		modelMatrix : m, //添加模型的變換矩陣，才能顯示在正確位置，否則打死也找不到，被放到地球的某個角落裏
		scale:1.0 //縮放倍數
}));
//模型加載後，如果有動畫就播放	
model.readyToRender.addEventListener(function(model) {
		// Play and loop all animations at half-spead
	model.activeAnimations.addAll({
			speedup : 0.5,
			loop : Cesium.ModelAnimationLoop.REPEAT
	});

});

加載模型後的效果

模型顯示是否順滑與模型三角面數，機器配置，瀏覽器版本密切相關。瀏覽器推薦使用Chrome30.0以上。

本篇到此結束