Cesium 实战 - 通过 Blender 将模型组件拆解为独立子模型

news2024/11/26 4:22:57

Cesium 实战 - 通过 Blender 将模型组件拆解为独立子模型

- 拆分模型
- - 1.导入模型（J15.glb）
  - 2.拆分模型
  - 3.保存模型
- 完整代码
- 在线示例

上篇博客介绍了 Cesium 实战 - AGI_articulations 扩展：模型自定义关节动作

这篇接着介绍一下，模型组件拆分为独立模型。

本文包括拆分模型、完整代码以及在线示例三部分。

拆分模型

模型组件拆解为独立模型相对比较简单，主要通过 Blender 来完成，以下是操作步骤：

1.导入模型（J15.glb）

（1）双击打开软件

在这里插入图片描述

（2）选中默认元素，按 delete 删除

在这里插入图片描述

（3）点击 File-import-gltf/glb，也可以选择导入其他格式。

在这里插入图片描述

（4）导入成功，模型会加载，右侧会显示所有组件名以及模型属性。

在这里插入图片描述

2.拆分模型

（1）选中需要拆分的模型组件，这里以 J15 正下方导弹为例

安装鼠标中键（滚轮），拖动调整模型视角：

在这里插入图片描述

（2）点击选中红框内的导弹（J15_31），复制（ctrl+c）。

在这里插入图片描述

（3）新开一个blender软件窗口，粘贴（ctrl+v）。

导弹（J15_31）的位置、大小、比例等属性均与原模型一致。

此时导弹（J15_31）已经是独立的模型，与原模型（J15）无关联。

在这里插入图片描述

（4）移除（按 delete 键）原模型（J15）的导弹组件（J15_31）

在这里插入图片描述

3.保存模型

（1）保存导弹模型（J15_31）

注意：不要对导弹模型（J15_31）进行任何修改。

File-export-glft。这里需要导出为 gltf 或者 glb。

注意：这里的模型名称，最好与原模型相关，比如：J15_J15_31

在这里插入图片描述

（2）保存原模型（J15）,与保存导弹操作一致。

在这里插入图片描述

总结：经过拆分的模型 J15_split 和 J15_J15_31 可以共同渲染到地球中，并且只要将坐标、高度以及比例、分辨率等模型参数设置一致，他们的相对位置与拆分前是相同的。

通过Cesium CZML可以分别给他们设置不同的行进时间以及轨迹，实现模拟导弹精准打击的效果。

完整代码

const czml = [
            {
                "id": "document",
                "name": "SpaceX",
                "version": "1.0",
                // 需要注意的是，整个地球对象公用一个时钟系统，如果加载多个 czml，请保证时间一致
                // 渲染加载其他时钟相关的对象，也要注意时间一致
                "clock": {
                    // 运动的时间区间
                    "interval": "2023-06-14T10:00:00Z/2023-06-14T10:30:33Z",
                    // 当前时间
                    "currentTime": "2023-06-14T10:00:00Z",
                    // 运动速率
                    "multiplier": 50,
                    // 是否循环：CLAMPED 不循环；LOOP_STOP 循环
                    "range": "CLAMPED",
                    // cesium 系统时钟速率
                    "step": "SYSTEM_CLOCK_MULTIPLIER"
                }
            },
            // J15 主体
            {
                "id": "Vulcan",
                "availability": "2023-06-14T10:00:00Z/2023-06-14T10:30:33Z",
                "name": "Vulcan",
                // 运动路径
                "path": {
                    "show": [
                        {
                            "interval": "2023-06-14T10:00:00Z/2023-06-14T10:30:33Z",
                            "boolean": true
                        }
                    ],
                    "width": 5,
                    "resolution": 1,
                    "material": {
                        polylineGlow: {
                            color: {rgba: [0, 0, 255, 255]},
                            glowPower: 0.25,
                        },
                    },
                },
                // 模型
                "model": {
                    "show": true,
                    "gltf": [
                        {
                            "interval": "2023-06-14T10:00:00Z/9999-12-31T23:59:59.9999999Z",
                            "uri": "https://openlayers.vip/examples/resources/model/j15-main.glb"
                        },
                    ],
                    "minimumPixelSize": 256,
                    "scale": 3,
                    "runAnimations": false,
                },
                // 运动位置
                "position": {
                    // 插值
                    "interpolationAlgorithm": "LAGRANGE",
                    // 注意插值参数
                    "interpolationDegree": 1,
                    "referenceFrame": "FIXED",
                    "epoch": "2023-06-14T10:00:00Z",
                    // 位置信息
                    // 时间、x、y、z
                    "cartesian": [
                        0.000, -2181756.507204248, 4401502.463808623, 4082345.0951582263,
                        300.000, -2221900.867803482, 4405392.727091728, 4056473.1271699946,
                        900.000, -2252772.6404420133, 4418632.02508438, 4025043.2226449093,
                        1500.000, -2298167.906071293, 4420521.33707002, 3997259.6931305756,
                    ]
                },
                // 方向
                "orientation": {
                    // 自动计算运动朝向
                    "velocityReference": "#position"
                },
            },
            // J15 导弹 1
            {
                "id": "Vulcan1",
                "availability": "2023-06-14T10:00:00Z/2023-06-14T10:14:33Z",
                "name": "Vulcan1",
                // 运动路径
                "path": {
                    "show": [
                        {
                            "interval": "2023-06-14T10:00:00Z/2023-06-14T10:17:33Z",
                            "boolean": false
                        }
                    ],
                    "resolution": 1,
                },
                // 模型
                "model": {
                    "show": true,
                    "gltf": [
                        {
                            "interval": "2023-06-14T10:00:00Z/9999-12-31T23:59:59.9999999Z",
                            "uri": "https://openlayers.vip/examples/resources/model/j15-1.glb"
                        },
                    ],
                    "scale": 3,
                    "minimumPixelSize": 40,
                    "runAnimations": false,
                    // 导弹模型边框
                    "silhouetteColor": { "rgba": [255, 0, 0, 255]},
                    // 边框宽度
                    "silhouetteSize": 1
                },
                // 运动位置
                "position": {
                    // 插值
                    "interpolationAlgorithm": "LAGRANGE",
                    "interpolationDegree": 1,
                    "referenceFrame": "FIXED",
                    "epoch": "2023-06-14T10:00:00Z",
                    // 位置信息
                    // 时间、x、y、z
                    "cartesian": [
                        0.000, -2181756.507204248, 4401502.463808623, 4082345.0951582263,
                        300.000, -2221900.867803482, 4405392.727091728, 4056473.1271699946,
                        600.000, -2252772.6404420133, 4418632.02508438, 4025043.2226449093,
                        900.000, -2291045.540812567, 4445366.40019355, 3945320.706645339,
                    ]
                },
                // 方向
                "orientation": {
                    // 自动计算运动朝向
                    "velocityReference": "#position"
                },
            },
           
        ];
const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

const dataSourcePromise = viewer.dataSources.add(
  Cesium.CzmlDataSource.load(czml)
);

dataSourcePromise
  .then(function (dataSource) {
  const entity = dataSource.entities.getById("Vulcan");
    viewer.trackedEntity = entity;
    entity.viewFrom = new Cesium.Cartesian3(-21756.507204248, 4412.463808623,5000);
  
  })
  .catch(function (error) {
    console.error(error);
  });