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: "",
|
|
|
|
|
|
bimComponent: [],
|
|
|
|
|
|
};
|
|
|
|
|
|
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],
|
|
|
|
|
|
});
|
|
|
|
|
|
// 设置监听事件
|
|
|
|
|
|
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);
|
|
|
|
|
|
// 操作模型
|
|
|
|
|
|
renderConfigModel(obvApi);
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
function renderConfigModel(obvApi) {
|
|
|
|
|
|
console.log(obvApi);
|
2024-01-11 17:50:50 +08:00
|
|
|
|
console.log(configValue.bimComponent);
|
2023-12-12 11:43:19 +08:00
|
|
|
|
// 构件着色
|
|
|
|
|
|
if (configValue.bimComponent.length > 0) {
|
|
|
|
|
|
// 构件着色
|
2024-01-11 17:50:50 +08:00
|
|
|
|
configValue.bimComponent.map((item) => {
|
|
|
|
|
|
if(item.modelId){
|
|
|
|
|
|
// 构件着色
|
|
|
|
|
|
obvApi.setObjectsColor([item], 51, 122, 183, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
// obvApi.setObjectsColor(configValue.bimComponent, 51, 122, 183, 1);
|
2023-12-12 11:43:19 +08:00
|
|
|
|
} 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);
|
|
|
|
|
|
if (data.token && data.urn) {
|
|
|
|
|
|
configValue.viewToken = data.token;
|
|
|
|
|
|
configValue.urn = data.urn;
|
|
|
|
|
|
// removeModel(modelId)
|
|
|
|
|
|
document.getElementById("viewer").innerHTML = "";
|
|
|
|
|
|
// 调用main函数进行代码的实现
|
|
|
|
|
|
main();
|
|
|
|
|
|
if (data.bimComponent) {
|
|
|
|
|
|
configValue.bimComponent = data.bimComponent;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
configValue.bimComponent = [];
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
