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的所有的箭头 });
