2023-12-12 11:43:19 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<title>My first BIMFACE app</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.view3d-viewer {
|
|
|
|
|
|
width: 98% !important;
|
|
|
|
|
|
height: 98% !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="viewer"
|
|
|
|
|
|
style="width: 100%; height: 95vh"
|
|
|
|
|
|
class="my-obv-viewer"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
<script
|
|
|
|
|
|
src="https://api.cloud.pkpm.cn/bimviewer/viewer/v5/obv.js"
|
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
|
></script>
|
|
|
|
|
|
<link
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
href="https://api.cloud.pkpm.cn/bimviewer/viewer/v5/obv.css"
|
|
|
|
|
|
type="text/css"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<link
|
|
|
|
|
|
href="https://api.cloud.pkpm.cn/bimviewer/viewer/v4/locale/locale.properties"
|
|
|
|
|
|
rel="resource"
|
|
|
|
|
|
type="application/l10n"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
let configValue = {
|
|
|
|
|
|
viewToken: "",
|
|
|
|
|
|
urn: "",
|
2024-01-17 18:48:47 +08:00
|
|
|
|
hideArr: [],
|
|
|
|
|
|
colorArr: [],
|
2023-12-12 11:43:19 +08:00
|
|
|
|
};
|
2024-01-17 18:48:47 +08:00
|
|
|
|
let firstEnter = 0;
|
|
|
|
|
|
let dealArr = [];
|
2023-12-12 11:43:19 +08:00
|
|
|
|
async function main() {
|
|
|
|
|
|
// 创建实例需要传入的参数，部署环境serviceConfig 和 用户有效期getAccessToken
|
|
|
|
|
|
const applicationOptions = {
|
|
|
|
|
|
// 配置 OBV 服务端（BIMServer）API 服务的 origin，这个适合于私有部署的用户使用
|
|
|
|
|
|
getAccessToken: getAccessToken,
|
|
|
|
|
|
refreshAccessToken: getAccessToken,
|
|
|
|
|
|
serviceConfig: {
|
|
|
|
|
|
origin: "https://api.cloud.pkpm.cn",
|
|
|
|
|
|
apiContextPath: "/bimserver/viewing/v3",
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
// 定义urn，模型的唯一标识
|
|
|
|
|
|
let urn = configValue.urn;
|
|
|
|
|
|
// 实例化 Builder，用于模型加载
|
|
|
|
|
|
const builder = new OBV.Api.ObvBuilder();
|
|
|
|
|
|
// 创建 Application 对象
|
|
|
|
|
|
const application = await builder.buildApplication(applicationOptions);
|
|
|
|
|
|
// 创建 document 管理视图，加载完成后可以调用接口
|
|
|
|
|
|
const obvDocument = await builder.loadDocument(application, urn);
|
|
|
|
|
|
// 创建 viewer 容器, 创建API
|
|
|
|
|
|
const obvApi = await builder.buildViewer3d(
|
|
|
|
|
|
application,
|
|
|
|
|
|
document.getElementById("viewer")
|
|
|
|
|
|
);
|
|
|
|
|
|
// 获取三维模型视图
|
|
|
|
|
|
const viewer3dItems = obvDocument.get3dGeometryItems();
|
|
|
|
|
|
// 加载模型
|
|
|
|
|
|
builder.load3dModels(obvApi, {
|
|
|
|
|
|
obvDocument: obvDocument,
|
|
|
|
|
|
viewer3dItem: viewer3dItems[0],
|
|
|
|
|
|
});
|
2024-01-17 18:48:47 +08:00
|
|
|
|
// 监听模型树加载完成，可以查询模型树（getObjectTree）
|
|
|
|
|
|
obvApi.addEventListener(
|
|
|
|
|
|
OBV.ViewerEventTypes.V3dModelTreeLoadedEvent,
|
|
|
|
|
|
(event) => {
|
|
|
|
|
|
console.log("V3dModelTreeLoadedEvent", event);
|
|
|
|
|
|
|
|
|
|
|
|
// 设置监听事件(主要用于模型树隐藏)
|
|
|
|
|
|
obvApi.addEventListener(
|
|
|
|
|
|
OBV.ViewerEventTypes.V3dHideEvent,
|
|
|
|
|
|
(event) => {
|
|
|
|
|
|
console.log(event);
|
|
|
|
|
|
// obvApi
|
|
|
|
|
|
// .getObjectTree(event.nodeIdArray[0].modelId)
|
|
|
|
|
|
// .then(async (modelTreeData) => {
|
|
|
|
|
|
// console.log(JSON.parse(JSON.stringify(modelTreeData)));
|
|
|
|
|
|
// let responseData = JSON.parse(JSON.stringify(modelTreeData))
|
|
|
|
|
|
// dealArr.push({modelId: responseData.modelId, dbId: responseData.rootId})
|
|
|
|
|
|
// await dealArrData(responseData.root.children);
|
|
|
|
|
|
// // 往父级传递
|
|
|
|
|
|
// window.parent.postMessage({ msg: dealArr, tip: 'hidden' });
|
|
|
|
|
|
// });
|
|
|
|
|
|
// 往父级传递
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
|
msg: event.nodeIdArray,
|
|
|
|
|
|
tip: "hidden",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
// 设置监听事件(主要用于模型树显示)
|
|
|
|
|
|
obvApi.addEventListener(
|
|
|
|
|
|
OBV.ViewerEventTypes.V3dShowEvent,
|
|
|
|
|
|
(event) => {
|
|
|
|
|
|
console.log(event);
|
|
|
|
|
|
// obvApi
|
|
|
|
|
|
// .getObjectTree(event.nodeIdArray[0].modelId)
|
|
|
|
|
|
// .then(async (modelTreeData) => {
|
|
|
|
|
|
// console.log(JSON.parse(JSON.stringify(modelTreeData)));
|
|
|
|
|
|
// let responseData = JSON.parse(JSON.stringify(modelTreeData))
|
|
|
|
|
|
// dealArr.push({dbId: responseData.rootId})
|
|
|
|
|
|
// await dealArrData(responseData.root.children);
|
|
|
|
|
|
// // 往父级传递
|
|
|
|
|
|
// window.parent.postMessage({ msg: dealArr, tip: 'hidden' });
|
|
|
|
|
|
// });
|
|
|
|
|
|
// 往父级传递
|
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
|
msg: event.nodeIdArray,
|
|
|
|
|
|
tip: "show",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
// 设置监听事件(构件选择)
|
2023-12-12 11:43:19 +08:00
|
|
|
|
obvApi.addEventListener(
|
|
|
|
|
|
OBV.ViewerEventTypes.V3dSelectionChangedEvent,
|
|
|
|
|
|
(event) => {
|
|
|
|
|
|
console.log(event);
|
|
|
|
|
|
// 往父级传递
|
|
|
|
|
|
window.parent.postMessage({ msg: event.nodeIdArray });
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
// 监听相机改变
|
|
|
|
|
|
obvApi.addEventListener(
|
|
|
|
|
|
OBV.ViewerEventTypes.V3dCameraChangeEvent,
|
|
|
|
|
|
(event) => {
|
|
|
|
|
|
console.log("V3dCameraChangeEvent", event);
|
2024-01-17 18:48:47 +08:00
|
|
|
|
if (firstEnter == 0) {
|
|
|
|
|
|
// 首次进入才操作模型
|
|
|
|
|
|
// 操作模型
|
|
|
|
|
|
renderConfigModel(obvApi);
|
|
|
|
|
|
}
|
2023-12-12 11:43:19 +08:00
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
2024-01-17 18:48:47 +08:00
|
|
|
|
// 处理数据
|
|
|
|
|
|
function dealArrData(arr) {
|
|
|
|
|
|
arr.map((item) => {
|
|
|
|
|
|
if (item.children && item.children.length > 0) {
|
|
|
|
|
|
dealArrData(item.children);
|
|
|
|
|
|
}
|
|
|
|
|
|
dealArr.push({ dbId: item.dbId });
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2023-12-12 11:43:19 +08:00
|
|
|
|
function renderConfigModel(obvApi) {
|
|
|
|
|
|
console.log(obvApi);
|
2024-01-17 18:48:47 +08:00
|
|
|
|
console.log(configValue.hideArr);
|
|
|
|
|
|
++firstEnter; // 避免多次调用
|
|
|
|
|
|
// 隐藏构件
|
|
|
|
|
|
if (configValue.hideArr.length > 0) {
|
|
|
|
|
|
obvApi.hide(configValue.hideArr);
|
|
|
|
|
|
}
|
|
|
|
|
|
// else {
|
|
|
|
|
|
// obvApi.showAll();
|
|
|
|
|
|
// }
|
2023-12-12 11:43:19 +08:00
|
|
|
|
// 构件着色
|
2024-01-17 18:48:47 +08:00
|
|
|
|
if (configValue.colorArr.length > 0) {
|
|
|
|
|
|
configValue.colorArr.map((item) => {
|
|
|
|
|
|
if (item.modelId) {
|
|
|
|
|
|
let firstIndex = item.color.indexOf(",");
|
|
|
|
|
|
let secondIndex = item.color.indexOf(",", firstIndex + 1);
|
|
|
|
|
|
let thirdIndex = item.color.indexOf(")", -1);
|
2024-01-11 17:50:50 +08:00
|
|
|
|
// 构件着色
|
2024-01-17 18:48:47 +08:00
|
|
|
|
obvApi.setObjectsColor(
|
|
|
|
|
|
[item],
|
|
|
|
|
|
item.color.substring(4, firstIndex),
|
|
|
|
|
|
item.color.substring(firstIndex + 2, secondIndex),
|
|
|
|
|
|
item.color.substring(secondIndex + 2, thirdIndex),
|
|
|
|
|
|
1
|
|
|
|
|
|
);
|
2024-01-11 17:50:50 +08:00
|
|
|
|
}
|
|
|
|
|
|
});
|
2023-12-12 11:43:19 +08:00
|
|
|
|
}
|
2024-01-17 18:48:47 +08:00
|
|
|
|
// else {
|
|
|
|
|
|
// obvApi.restoreObjectsColor();
|
|
|
|
|
|
// }
|
2023-12-12 11:43:19 +08:00
|
|
|
|
}
|
|
|
|
|
|
// 访问的令牌 getAccessToken 和 令牌有效期 expiresIn
|
|
|
|
|
|
function getAccessToken(callBack) {
|
|
|
|
|
|
callBack(configValue.viewToken);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 监听父组件的信息传递
|
|
|
|
|
|
window.addEventListener("message", async function(e) {
|
|
|
|
|
|
// const modelId = e.data.modelId
|
|
|
|
|
|
const data = e.data || {};
|
2024-01-17 18:48:47 +08:00
|
|
|
|
console.log(data.token);
|
|
|
|
|
|
console.log(data.urn);
|
|
|
|
|
|
firstEnter = 0;
|
2023-12-12 11:43:19 +08:00
|
|
|
|
if (data.token && data.urn) {
|
|
|
|
|
|
configValue.viewToken = data.token;
|
|
|
|
|
|
configValue.urn = data.urn;
|
|
|
|
|
|
// removeModel(modelId)
|
|
|
|
|
|
document.getElementById("viewer").innerHTML = "";
|
|
|
|
|
|
// 调用main函数进行代码的实现
|
|
|
|
|
|
main();
|
2024-01-17 18:48:47 +08:00
|
|
|
|
if (data.hideArr && data.colorArr) {
|
|
|
|
|
|
configValue.hideArr = data.hideArr;
|
|
|
|
|
|
configValue.colorArr = data.colorArr;
|
2023-12-12 11:43:19 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
