217 lines
7.5 KiB
HTML
217 lines
7.5 KiB
HTML
<!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: "",
|
||
hideArr: [],
|
||
colorArr: [],
|
||
};
|
||
let firstEnter = 0;
|
||
let dealArr = [];
|
||
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],
|
||
});
|
||
// 监听模型树加载完成，可以查询模型树（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",
|
||
});
|
||
}
|
||
);
|
||
}
|
||
);
|
||
// 设置监听事件(构件选择)
|
||
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);
|
||
if (firstEnter == 0) {
|
||
// 首次进入才操作模型
|
||
// 操作模型
|
||
renderConfigModel(obvApi);
|
||
}
|
||
}
|
||
);
|
||
}
|
||
// 处理数据
|
||
function dealArrData(arr) {
|
||
arr.map((item) => {
|
||
if (item.children && item.children.length > 0) {
|
||
dealArrData(item.children);
|
||
}
|
||
dealArr.push({ dbId: item.dbId });
|
||
});
|
||
}
|
||
function renderConfigModel(obvApi) {
|
||
console.log(obvApi);
|
||
console.log(configValue.hideArr);
|
||
++firstEnter; // 避免多次调用
|
||
// 隐藏构件
|
||
if (configValue.hideArr.length > 0) {
|
||
obvApi.hide(configValue.hideArr);
|
||
}
|
||
// else {
|
||
// obvApi.showAll();
|
||
// }
|
||
// 构件着色
|
||
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);
|
||
// 构件着色
|
||
obvApi.setObjectsColor(
|
||
[item],
|
||
item.color.substring(4, firstIndex),
|
||
item.color.substring(firstIndex + 2, secondIndex),
|
||
item.color.substring(secondIndex + 2, thirdIndex),
|
||
1
|
||
);
|
||
}
|
||
});
|
||
}
|
||
// else {
|
||
// obvApi.restoreObjectsColor();
|
||
// }
|
||
}
|
||
// 访问的令牌 getAccessToken 和 令牌有效期 expiresIn
|
||
function getAccessToken(callBack) {
|
||
callBack(configValue.viewToken);
|
||
}
|
||
|
||
// 监听父组件的信息传递
|
||
window.addEventListener("message", async function(e) {
|
||
// const modelId = e.data.modelId
|
||
const data = e.data || {};
|
||
console.log(data.token);
|
||
console.log(data.urn);
|
||
firstEnter = 0;
|
||
if (data.token && data.urn) {
|
||
configValue.viewToken = data.token;
|
||
configValue.urn = data.urn;
|
||
// removeModel(modelId)
|
||
document.getElementById("viewer").innerHTML = "";
|
||
// 调用main函数进行代码的实现
|
||
main();
|
||
if (data.hideArr && data.colorArr) {
|
||
configValue.hideArr = data.hideArr;
|
||
configValue.colorArr = data.colorArr;
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|