140 lines
4.6 KiB
HTML
140 lines
4.6 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: [],
|
||
};
|
||
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);
|
||
console.log(configValue.hideArr);
|
||
let arr = [{"modelId":1,"dbId":6103}]
|
||
// 隐藏构件
|
||
if(configValue.hideArr.length > 0){
|
||
obvApi.hide(configValue.hideArr);
|
||
} else {
|
||
obvApi.showAll();
|
||
}
|
||
// 构件着色
|
||
if(configValue.colorArr.length > 0){
|
||
configValue.colorArr.map((item) => {
|
||
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);
|
||
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>
|