<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>3D模型交互</title>
|
<style media="screen">
|
* {
|
margin: 0;
|
padding: 0;
|
}
|
|
html, body {
|
height: 100%
|
}
|
|
.main {
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
height: 100%;
|
width: 100%;
|
}
|
|
.model {
|
flex: 1;
|
}
|
</style>
|
<link href="../css/Tailwind.css" rel="stylesheet" />
|
<!-- 引用BIMFACE的JavaScript显示组件库 -->
|
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
|
<script type="text/javascript" src="https://spump.oss-cn-shanghai.aliyuncs.com/assets/jq/jquery-3.3.1.min.js"></script>
|
</head>
|
<body>
|
<div class='main'>
|
<div class='model' id="domId"></div>
|
</div>
|
|
<script type="text/javascript">
|
|
var _viewer = null;//视图对象
|
var _modeler = null;//模型对象
|
let _callBackObj;//交互对象
|
|
|
//网页加载完成
|
$(document).ready(function () {
|
_callBackObj = window.chrome.webview.hostObjects.callBackObj;
|
_callBackObj.LoadCompleted();
|
})
|
|
//加载Bim模型(WinFrm调用)
|
function loadView(viewtoken) {
|
var options = new BimfaceSDKLoaderConfig();
|
options.viewToken = viewtoken;
|
BimfaceSDKLoader.load(options, successCallback, failureCallback);
|
}
|
|
//Bim模型加载成功后触发
|
function successCallback(viewMetaData) {
|
// 获取DOM元素
|
var dom4Show = document.getElementById('domId');
|
//判断是否为3d模型
|
if (viewMetaData.viewType == "3DView" || viewMetaData.viewType == "rfaView") {
|
var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
|
webAppConfig.domElement = dom4Show;
|
// 设置全局单位
|
webAppConfig.globalUnit = Glodon.Bimface.Common.Units.LengthUnits.Millimeter;
|
//取消工具条
|
webAppConfig.Toolbars = [];
|
// 开启材质替换
|
webAppConfig.enableReplaceMaterial = true;
|
// 创建WebApplication
|
var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
|
// 添加待显示的模型
|
app.addView(viewMetaData.viewToken);
|
// 从WebApplication获取m_viewer3D对象
|
_viewer = app.getViewer();
|
// 监听添加view完成的事件
|
_viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
|
// 调用viewer3D对象的Method，可以继续扩展功能
|
//自适应屏幕大小
|
window.onresize = function () {
|
_viewer.resize(document.documentElement.clientWidth, document.documentElement.clientHeight)
|
}
|
//禁用右键菜单
|
_viewer.toggleContextMenuDisplay(false);
|
//3d模型
|
_modeler = _viewer.getModel();
|
// 渲染3d模型
|
_viewer.render();
|
_callBackObj.LoadViewCompleted();
|
});
|
// 监听添加view点击构件的监听事件
|
_viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectdata) {
|
//获取点击构件的相关属性
|
if (objectdata.objectId !== undefined) {
|
_callBackObj.ClickIn(JSON.stringify(objectdata));
|
}
|
else {
|
_callBackObj.ClickOut(JSON.stringify(objectdata));
|
}
|
});
|
}
|
else {
|
_callBackObj.LoadViewFailed("未定义ViewType：" + viewMetaData.viewType);
|
}
|
}
|
|
//BIM模型加载失败后触发
|
function failureCallback(error) {
|
_callBackObj.LoadViewFailed(JSON.stringify(error));
|
}
|
|
|
|
|
|
</script>
|
</body>
|
</html>
|
<script src="../js/Base64.js"></script>
|
<script src="../js/Background.js"></script>
|
<script src="../js/ContextMenu.js"></script>
|
<script src="../js/DrawableContainer.js"></script>
|
<script src="../js/Zoom.js"></script>
|
<script src="../js/ComponentsTranslucent.js"></script>
|
<script src="../js/ComponentsVisible.js"></script>
|
<script src="../js/ComponentsSelected.js"></script>
|
|
<script src="../js/ComponentsBlink.js"></script>
|
<script src="../js/ComponentsColor.js"></script>
|
<script src="../js/LogicMarkLeadLabel.js"></script>
|
<script src="../js/LogicCalcuCustomLabel.js"></script>
|
<script src="../js/LogicFlowEffect.js"></script>
|
<script src="../js/Marker3dContainer.js"></script>
|
<script src="../js/LogicMonitor.js"></script>
|
|
<script src="js/CameraStatus.js"></script>
|
<script src="js/GetComponents.js"></script>
|
<script src="js/Layer.js"></script>
|
<script src="js/Panel.js"></script>
|
<script src="js/WalkThrough.js"></script>
|
