如何对两个三维模型进行对比

示例描述与操作指南

模型对比是从构件级来比较模型不同版本之间的差异。模型对比功能可以对比两个不同版本模型之间的差异,这些差异包含构件关系的差异、构件信息的差异以及模型中构件的增加与删除等改动。
构件信息的差异是指匹配构件的属性信息、基本信息、几何信息的差异;
构件关系的差异是指构件父子节点关系的变化,管道系统中连接关系的变化;
构件的增删情况是指非匹配构件的新增/删除、管道系统的增加与删除以及系统中构件的新增与删除。

示例效果展示

模型对比

实现步骤

第一步:获取模型对比结果,并展示在浏览器上

// 获取模型对比结果接口
const fetchModelComparedResults = () => {
    return fetch(`${op1.baseaddress}models/${compare_key}/compare/results?devcode=${op1.devcode}`)
    .then(result => result.json())
    .catch(e => console.log(e));
}

// 获取模型对比数据,拿到数据后创建左侧展示面板
fetchModelComparedResults().then(data => {
    if (data.code === 200) {
    modelComparedResult = data.data;
    buildBordList();
    modelComparedResult && buildBorad();
    }
});

第二步:加载修改前和修改后的模型,将新增、修改、删除的构件在对应模型上设置颜色

/**
* 加载修改前的模型,加载完后
* 飞跃到设置好的模型视角
* 将删除的构件设置成红色
* 删除没有geometry的构件列表

*/
vizbim1.showModelByDocumentId(filekey1, function () {
    vizbim1.fly.flyTo(cameraState);
    $("#viewport1").append("<h3>模型修改前</h3>");
    const components = modelComparedResult.deletedComponents;
    vizbim1.setObjtColor(components, [1, 0, 0]);
    components.forEach(item => {
    !vizbim1.components[item] && document.getElementById(item).remove();
    })

/**
* 加载修改后的模型,加载完后
* 飞跃到设置好的模型视角
* 将新增加的构件置色绿色,将修改的模型置色黄色
* 删除没有geometry的构件列表

*/
vizbim2.showModelByDocumentId(filekey2, function () {
    vizbim2.fly.flyTo(cameraState);
    $("#viewport2").append("<h3>模型修改后</h3>");
    vizbim2.setObjtColor(modelComparedResult.createdComponents, [0, 1, 0]);
    const changedComponents = redataComponents(modelComparedResult.attributes, modelComparedResult.geometries);
    vizbim2.setObjtColor(changedComponents, [1, 140/255,0]);
    const components = modelComparedResult.createdComponents.concat(changedComponents);
    components.forEach(item => {
    !vizbim2.components[item] && document.getElementById(item).remove();
    });
    modelComparedResult.attributes.forEach(item => {
    const attributeTitle = Object.keys(item)[0];
    const id = "attributeDiv" + attributeTitle;
    !vizbim2.components[attributeTitle] && document.getElementById(id).remove();
    });
});

下载完整代码

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页