Cesium添加模型
发布时间
阅读量：
阅读量
Cesium添加模型指南
添加3D模型的基本流程
初始化Cesium地图
创建模型管理类
设置模型位置和旋转
加载模型
普通3D模型
倾斜摄影模型
白膜模型
设置模型属性
添加交互功能
一、普通3D模型添加方法 ⭐⭐⭐
1. 基本代码实现
// 创建模型管理类
const model3D = new Model3D(appGis, viewer);
// 加载3D模型的核心代码
const entity = viewer.entities.add({
name: modelName,
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
orientation: Cesium.Transforms.headingPitchRollQuaternion(
position,
new Cesium.HeadingPitchRoll(heading, pitch, roll)
),
model: {
uri: modelUri, // 模型文件路径，通常是glTF/glb格式
scale: scale, // 模型缩放比例
minimumPixelSize: 128, // 最小像素大小
maximumScale: 100, // 最大缩放比例
clampToGround: true, // 是否贴合地面
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
}
});
javascript
2. 封装方法使用示例
// 更方便的调用方式
model3D.loadModel({
name: 'Bus', // 模型名称
longitude: 117.004364, // 经度
latitude: 40.074728, // 纬度
height: 0, // 高度
modelUri: '/static/model/ThreeD/busStation.glb', // 模型URI
scale: 1.0, // 模型缩放比例
headingDegrees: 189, // 航向角度
pitchDegrees: 0, // 俯仰角度
rollDegrees: 0 // 滚转角度
});
javascript
二、倾斜摄影模型加载 ⭐⭐
倾斜摄影模型通常是大规模的3D城市模型，以3D Tiles格式加载：
async function load3dTiles() {
// 加载倾斜摄影数据
const tileset = await Cesium.Cesium3DTileset.fromUrl('/path/to/tileset.json', {
shadows: true,
preferLeaves: true,
skipLevelOfDetail: true, // 启用跳过级别的细节
maximumScreenSpaceError: 0.75, // 最大屏幕空间误差
maximumMemoryUsage: 2048, // 最大内存使用量
dynamicScreenSpaceError: true // 启用动态屏幕空间误差
});
viewer.scene.primitives.add(tileset);
// 对模型进行位置调整
const boundingSphere = tileset.boundingSphere;
const cartographicCenter = Cesium.Cartographic.fromCartesian(boundingSphere.center);
const surface = Cesium.Cartesian3.fromRadians(cartographicCenter.longitude,
cartographicCenter.latitude, 0);
const offset = Cesium.Cartesian3.fromRadians(cartographicCenter.longitude,
cartographicCenter.latitude, 50);
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
javascript
三、白膜模型加载 ⭐⭐
白膜模型是一种特殊的3D模型样式，通常用于城市规划：
async function loadWhiteModel(uri) {
const tileset = await Cesium.Cesium3DTileset.fromUrl(uri + 'tileset.json', {
shadows: Cesium.ShadowMode.CAST_ONLY,
maximumScreenSpaceError: 20,
dynamicScreenSpaceError: true
});
// 设置模型样式 - 使用白色或自定义颜色
tileset.style = new Cesium.Cesium3DTileStyle({
color: 'color("white")' // 可以是条件表达式
});
// 添加自定义着色器效果
let customShader = new Cesium.CustomShader({
// 着色器代码
// ...
// 动态更新shader参数
update: function(shader) {
shader.setUniform("u_time", performance.now() * 0.001);
}
});
tileset.customShader = customShader;
viewer.scene.primitives.add(tileset);
}
javascript
四、常见模型属性设置 ⭐⭐
| 属性名称 | 说明 | 示例值 |
|---|---|---|
| scale | 模型缩放比例 | 1.0表示原始大小 |
| minimumPixelSize | 模型最小像素大小 | 128保证远处可见性 |
| maximumScale | 模型最大缩放比例 | 100限制最大尺寸 |
| clampToGround | 是否贴合地面 | true/false |
| heightReference | 高度参考 | CLAMP_TO_GROUND |
| silhouetteColor | 轮廓颜色 | Cesium.Color.RED |
| silhouetteSize | 轮廓宽度 | 2.0像素宽度 |
| color | 模型颜色 | Cesium.Color.WHITE |
| colorBlendMode | 颜色混合模式 | HIGHLIGHT高亮效果 |
五、模型交互技巧
1. 模型动画
// 模型飞行动画
async ModelFlip(entity, positionArr = [longitude, latitude, height], duration = 5) {
// 设置目标位置
const targetPosition = Cesium.Cartesian3.fromDegrees(
positionArr[0], positionArr[1], positionArr[2]
);
// 动画时长
const startTime = Cesium.JulianDate.now();
// 动画帧更新
const updateAnimation = () => {
const time = Cesium.JulianDate.now();
const t = Cesium.JulianDate.secondsDifference(time, startTime) / duration;
if (t >= 1.0) {
// 动画结束
return;
}
// 插值计算当前位置
const position = Cesium.Cartesian3.lerp(
startPosition, targetPosition, t, new Cesium.Cartesian3()
);
// 更新实体位置
entity.position = position;
// 请求下一帧
requestAnimationFrame(updateAnimation);
};
// 开始动画
updateAnimation();
}
javascript
2. 模型显示/隐藏控制
// 显示/隐藏模型
function toggleModelVisibility(modelName, isVisible) {
const entity = model3D.getGlb(modelName);
if (entity) {
entity.show = isVisible;
// 可选：飞行到模型位置
if (isVisible) {
viewer.flyTo(entity, {
duration: 1.5,
offset: new Cesium.HeadingPitchRange(
0.0, // 航向角
Cesium.Math.toRadians(-30.0), // 俯仰角
100.0 // 距离
)
});
}
}
}
javascript
六、实际应用示例
以下是项目中添加多个模型的实际应用示例：
// 模型列表定义
const Model3DList = [
['ISCD', [116.999934, 40.045339, 0], true, 'synaesthesiaModelLayer', [0, 0, 0], 4, 4, '/static/model/ThreeD/SynaesthesiaIntegratedDevice.glb'],
['WD', [117.000058, 40.045449, 0], true, 'wirelessModelLayer', [90, 0, 0], 4, 4, '/static/model/ThreeD/WirelessDection.glb'],
['RD', [117.000213, 40.045700, 0], true, 'RadioDetectionModelLayer', [0, 0, 0], 4, 4, '/static/model/ThreeD/RadioDetection.glb'],
['NSP', [116.999898, 40.045342, 0], true, 'NavigationSpoofingModelLayer', [0, 0, 0], 4, 4, '/static/model/ThreeD/NavigationSpoofing.glb'],
['Bus', [117.004364, 40.074728, 0], true, 'busstationModelLayer', [189, 0, 0], 1, 1, '/static/model/ThreeD/busStation.glb'],
['Bus2', [117.004146, 40.074770, 0], true, 'busstationModelLayer', [10, 0, 0], 1, 1, '/static/model/ThreeD/busStation.glb'],
]
// 批量加载模型
function loadAllModels() {
Model3DList.forEach(item => {
model3D.loadModel({
name: item[0],
longitude: item[1][0],
latitude: item[1][1],
height: item[1][2],
show: item[2],
typeMap: item[3],
headingDegrees: item[4][0],
pitchDegrees: item[4][1],
rollDegrees: item[4][2],
scale: item[5],
minimumPixelSize: item[6] * 32,
modelUri: item[7]
});
});
}
javascript
七、进阶技巧
1. 模型裁剪
// 裁剪地形和模型
async function clipTerrain(options) {
viewer.scene.globe.clippingPlanesEnabled = true;
// 计算裁剪平面
const clippingPlanes = new Cesium.ClippingPlaneCollection({
planes: [
// 多个裁剪平面定义...
new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -width/2),
new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -width/2),
// ...
],
edgeWidth: 100.0,
edgeColor: Cesium.Color.BLACK
});
viewer.scene.globe.clippingPlanes = clippingPlanes;
}
javascript
2. 自定义着色器效果
可以通过自定义着色器为模型添加特殊效果，如发光、渐变色等：
// 创建自定义着色器
const customShader = new Cesium.CustomShader({
// 顶点着色器和片元着色器代码
vertexShaderText: /* GLSL */ `
// 着色器代码...
`,
fragmentShaderText: /* GLSL */ `
// 着色器代码...
`,
uniforms: {
u_glowColor: {
type: Cesium.UniformType.VEC3,
value: [0.0, 1.0, 1.0] // 青色光晕
},
u_glowPower: {
type: Cesium.UniformType.FLOAT,
value: 0.25
}
}
});
// 应用到模型
tileset.customShader = customShader;
javascript
学习建议
- 从简单开始 ：先尝试添加一个基本的glTF模型
- 理解坐标系统 ：掌握Cesium中WGS84坐标系的使用
- 性能优化 ：大型模型使用时注意设置适当的
maximumScreenSpaceError和maximumMemoryUsage值 - 模型格式转换 ：使用工具将不同格式的模型转换为glTF/glb格式
- 交互设计 ：为模型添加鼠标事件，实现点击、悬停等交互功能
全部评论 (0)
还没有任何评论哟~