1. 找模型
加载模型的脚本如下:
loadShipModel(cartesian, degree) {
// 设置模型的方向
const heading = Cesium.Math.toRadians(degree); // 旋转角度
const pitch = 0; // 保持水平
const roll = 0; // 无倾斜
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
// 使用 headingPitchRollToFixedFrame 来设置模型的模型矩阵
const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(cartesian, hpr);
// 加载GLB模型并应用模型矩阵
return window.Viewer.scene.primitives.add(
Cesium.Model.fromGltf({
url: '/ship.glb',
modelMatrix: modelMatrix,
scale: 1.0, // 可根据需要调整比例
minimumPixelSize: 100, // 最小像素尺寸,使模型在远处时保持一定大小
}));
}
之前在Cesium中加载过飞机的模型,现在需求是加载船舶的模型,在 Cesium可选模型 中并没有找到船舶模型。问了一下ChatGPT,给出了几个模型网站,最终选择了 sketchfab。
考虑到性能,下载最小的那个。
然后将其加载到Cesium中,效果如下:
发现模型位置不对,应该在弹窗下方。问了一下ChatGPT,说是模型的中心偏移可能是因为原始模型的坐标原点不在船的几何中心,建议我修改模型的中心。
2. 修改模型中心点
我只会一点前端开发,不懂建模方面的东西。然后就想着应该有网站能够在线编辑,于是搜索“glb 将模型中心改为原点”。
搜索结果推荐使用 GLTF编辑器。
导入一看,果然模型的中心不在原点。
我修改了一下中心点,然后导出,发现要收费。
然后用英文搜了下“glb modify center point online”
点进了第一个网站 gltfeditor。
在这儿修改中心点,然后成功导出了。
3. 压缩模型大小
考虑到性能,还是想让模型小一点。于是找到了optimizeglb这个网站,能够优化模型,去掉一些冗余的信息。优化过后在Cesium当中加载是没问题的,但是好像不能再将其导入上述网站了,好像是因为缺少什么信息之类的。不过不影响前端开发,也就没去深究。
该网站每个账户有5次免费的机会。原先7MB,优化后1MB,还行。
最终效果: