99 lines
3.3 KiB
HTML
99 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>My first BIMFACE app</title>
|
||
</head>
|
||
<body>
|
||
<div id="domId" style="width: 100%; height: 95vh"></div>
|
||
<script
|
||
src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
|
||
charset="utf-8"
|
||
></script>
|
||
<script>
|
||
let model3D;
|
||
let viewer3D;
|
||
let app;
|
||
let modelState;
|
||
let configValue = {
|
||
hideArr: [],
|
||
colorArr: [],
|
||
};
|
||
const bimCallback = (viewToken) => {
|
||
// let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
|
||
let loaderConfig = new BimfaceSDKLoaderConfig();
|
||
loaderConfig.viewToken = viewToken;
|
||
BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
|
||
function successCallback(viewMetaData) {
|
||
let domShow = document.getElementById("domId");
|
||
let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
|
||
webAppConfig.domElement = domShow;
|
||
app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
|
||
app.addView(viewToken);
|
||
viewer3D = app.getViewer();
|
||
// 监听添加view完成的事件
|
||
viewer3D.addEventListener(
|
||
Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
|
||
function() {
|
||
// 调用viewer3D对象的Method，可以继续扩展功能
|
||
// 从viewer3D对象中获取模型对象model3D
|
||
model3D = viewer3D.getModel();
|
||
// 获取模型状态
|
||
modelState = viewer3D.getCurrentState();
|
||
// 渲染3D模型
|
||
viewer3D.render();
|
||
// 操作模型
|
||
renderConfigModel();
|
||
}
|
||
);
|
||
// 添加构件单击事件
|
||
viewer3D.addEventListener(
|
||
Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
|
||
(data) => {
|
||
console.log(data);
|
||
setTimeout(() => {
|
||
// 往父级传递
|
||
window.parent.postMessage({ msg: data.elementId });
|
||
}, 200);
|
||
}
|
||
);
|
||
}
|
||
|
||
function failureCallback(error) {
|
||
console.log(error);
|
||
}
|
||
};
|
||
function renderConfigModel() {
|
||
// 恢复模型状态
|
||
viewer3D.setState(modelState);
|
||
model3D.hideComponentsById(configValue.hideArr);
|
||
configValue.colorArr.map((item) => {
|
||
model3D.overrideComponentsColorById(
|
||
[item.name],
|
||
new Glodon.Web.Graphics.Color(item.color, 1)
|
||
);
|
||
});
|
||
viewer3D.render();
|
||
}
|
||
// 监听父组件的信息传递
|
||
window.addEventListener("message", async function(e) {
|
||
// const modelId = e.data.modelId
|
||
const data = e.data || {};
|
||
if (data.token) {
|
||
// removeModel(modelId)
|
||
document.getElementById("domId").innerHTML = "";
|
||
await bimCallback(data.token);
|
||
if (data.hideArr && data.colorArr) {
|
||
configValue.hideArr = data.hideArr;
|
||
configValue.colorArr = data.colorArr;
|
||
}
|
||
}
|
||
// console.log(e.data, '父级页面传来的数据')
|
||
// setTimeout(() => {
|
||
// window.parent.postMessage({ msg: 'hello' })
|
||
// }, 2000)
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|