如何对三维模型中的系统流向与数据进行展示？
1、第一步 根据选定的构件获取相应的系统所属组别的构件列表
进入小红砖开放平台，根据选定的构件id,利用数据接口获取相应的系统所属组别的构件列表。
所需代码：
// 数据接口: 根据systemgroup的id获取相应的systemgroup的内容const fetchComponentSystemGroup = (filekey,componentId) => { return fetch(`${op.host}/models/${filekey}/components/${componentId}/systemgroup?devcode=${devcode}`) .then(response => response.json())}
2、第二步 获取模型的系统类别和对应系统下的构件列表
根据数据接口获取模型的系统分组，再根据每个组别的id利用数据接口去获取对应组别的构件id列表。
所需代码：
// 数据接口，获取模型里系统类别为IFCSYSTEM的系统的各个系统名称const getComponentBySystem = (id) => { return fetch(`${op.host}/models/${id}/components/IFCSYSTEM?devcode=${devcode}`) .then(response => response.json()) .then(result => { const promiseArray = []; let systermComponents = result.data; const promise1 = fetchComponentSystemGroup(id,systermComponents[5].key) .then(result=>{ systemComponents1 = result.data; });
完整代码，可进入小红砖开放平台查看。
3、第三步 添加流向箭头和三维字体
根据获取模型的对应的组别的构件列表，添加对应的流向箭头和三维字体。
所需代码：
// 监听模型加载完成viewer3D.getViewerImpl(). modelManager. addEventListener(BIMWINNER.BOS3D.EVENTS.ON_LOAD_COMPLETE, function (event) { scene.add(textMark); // 模型加载完成后，将箭头的父级对象添加进场景，便于管理 addAllSystemText(); // 添加场景里的三维字体 backToOrigin(); // 加载完模型后 移除按钮的禁点功能 changeSystemColor(); // 加载完模型后，将模型的各个系统管道的颜色和材质进行调整 viewer3D.flyTo(mainView); // 加载完模型后，场景飞跃到上面设置好的视角 newCreateSystem1Arrow(); // 创建系统1的所有的箭头 newCreateSystem2Arrow(); // 创建系统2的所有的箭头 newCreateSystem3Arrow(); // 创建系统3的所有的箭头 newCreateSystem4Arrow(); // 创建系统4的所有的箭头 newCreateSystem5Arrow(); // 创建系统5的所有的箭头 newCreateSystem6Arrow(); // 创建系统6的所有的箭头 });
