cesium添加模型非常簡單,通過其Cesium.model.接口觉渴,可以添加基于GLTF的模型介劫,這里我們通過Cesium.Model.fromGltf()方法。來添加我們的模型案淋。測試模型都是用網(wǎng)上的座韵,3dmax的需要導(dǎo)出成fbx之后,通過win10自帶的3d模型查看器加入到地圖上的哎迄。
我們用不到所有的只需要添加進(jìn)來
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url : Model_URL,
scale : Model_Scale,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
color:Cesium.Color.fromCssColorString('#ffffff'),
}));
其中URL是模型的地址回右,scale是模型的尺寸,heightReference是模型高度的參考漱挚。color是模型的顏色(顏色會與材質(zhì)融合)
接下來我們要把它添加到地圖上我們指定的地點(diǎn)翔烁。
function update3dtilesMaxtrix(model,params) {
//旋轉(zhuǎn)
var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
//平移
var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
//旋轉(zhuǎn)、平移矩陣相乘
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
//賦值給model
model.modelMatrix = m;
}
由于我們直接添加的primitives旨涝,所以我們可以直接修改model的投影矩陣蹬屹,來直接放置到我們需要的地圖上。我們可以點(diǎn)擊地球來獲取我們需要的位置白华。
var handler1 = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler1.setInputAction(function (movement) {
cancelfocus();
if(addModel == true){
let ray = viewer.camera.getPickRay(movement.position);
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var alt1 = cartographic.height;
var params= {
tx: lng, //模型中心X軸坐標(biāo)(經(jīng)度慨默,單位:十進(jìn)制度)
ty: lat, //模型中心Y軸坐標(biāo)(緯度,單位:十進(jìn)制度)
tz: alt1, //模型中心Z軸坐標(biāo)(高程弧腥,單位:米)
rx: 0, //X軸(經(jīng)度)方向旋轉(zhuǎn)角度(單位:度)
ry: 0, //Y軸(緯度)方向旋轉(zhuǎn)角度(單位:度)
rz: 0 //Z軸(高程)方向旋轉(zhuǎn)角度(單位:度)
};
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
url : Model_URL,
scale : Model_Scale,
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
color:Cesium.Color.fromCssColorString('#ffffff'),
}));
model.type = "model";
model.tx = lng;
model.ty = lat;
model.tz = alt1;
model.rx = 0;
model.ry = 0;
model.rz = 0;
update3dtilesMaxtrix(model,params);
addModel = false;
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
這樣我們就可以成功的將模型添加到我們點(diǎn)擊在地球上的位置了厦取,或者我們還可以移動我們的model只需在鼠標(biāo)事件中獲取我們需要的位置坐標(biāo)就行了,注意我們再將其添加到模型高度上時(shí)管搪,他是將自身也會算入其中虾攻,會導(dǎo)致越來越高(除非快速移動到另外一個(gè)模型上)铡买。但是如果根據(jù)
地形就不會有這個(gè)問題。但是就無法添加到模型上去(取舍看自己需求)霎箍。所以我添加的時(shí)候因?yàn)椴粫x中model所以是獲取模型的高度奇钞,之后進(jìn)行平移時(shí),也是獲取的模型高度漂坏,但是不改變自身model的模型高度景埃,高度獲取的就是添加時(shí)存入到model里的高度。
let ray = this.viewer.camera.getPickRay(movement.endPosition);//movement是屏幕坐標(biāo)
let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);//獲取在地球上的點(diǎn)
console.log(cartesian);
if(typeof pointDraged.primitive.type =="undefined"){
return;
}
var cartesian2 = viewer.scene.pickPosition(movement.endPosition);//獲取鼠標(biāo)點(diǎn)擊上模型的坐標(biāo)
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var ellipsoid = viewer.scene.globe.ellipsoid;
var a1 = ellipsoid.cartesianToCartographic(cartesian);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var alt1 = cartographic.height;
這樣在通過上面的修改model矩陣代碼就能夠?qū)ode進(jìn)行移動了顶别。
刪除model我是通過監(jiān)聽鍵盤的退格事件來完成的谷徙。
function getFlagForKeyCode(keyCode) {
switch (keyCode) {
case 8:
if(typeof SelModel != "undefine"){
viewer.scene.primitives.remove(SelModel);
SelModel = "";
}
return "Backspace";
default:
return undefined;
}
}
document.addEventListener('keydown', function (e) {
var flagName = getFlagForKeyCode(e.keyCode);
}, false);
document.addEventListener("keyup", function (e) {
var flagName = getFlagForKeyCode(e.keyCode);
}, false);