高阶方式
根据文件类型分别实例化Viewer2D,Viewer3D,能分别显示模型或图纸,但不包括BIMFACE提供的默认UI。
适用场景
在Viewer2D和Viewer3D的基础上,自定义UI,并进行扩展开发。
使用说明
- 使用viewToken初始化显示组件
- 判断待显示的文件是2D还是3D
- 根据文件类型不同,分别实例化Viewer2D,Viewer3D
代码示例
<!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>your page title</title>
<!-- 引用BIMFACE的JavaScript显示组件库 -->
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
</head>
<body>
<!-- 定义DOM元素,用于在该DOM元素中显示模型或图纸 -->
<div id="domId" style="width:800px; height:600px;position:relative;"></div>
<script type="text/javascript">
// 指定待显示的模型或图纸(viewToken从服务端获取)
var viewToken = '<yourViewToken>';
// 初始化显示组件
var options = new BimfaceSDKLoaderConfig();
options.viewToken = viewToken;
BimfaceSDKLoader.load(options, successCallback, failureCallback);
function successCallback(viewMetaData) {
if (viewMetaData.viewType == "dwgView") {
// ======== 判断是否为2D图纸 ========
// 获取DOM元素
var dom4Show = document.getElementById('domId');
// 配置参数
var config = new Glodon.Bimface.Viewer.Viewer2DConfig();
config.domElement = dom4Show;
// 创建viewer2D对象
var viewer2D = new Glodon.Bimface.Viewer.Viewer2D(config);
// 添加模型
viewer2D.addView(viewToken);
// 监听添加view完成的事件
viewer2D.addEventListener(Glodon.Bimface.Viewer.Viewer2DEvent.ViewAdded,function() {
// 渲染2D模型
viewer2D.render();
// 调用viewer2D对象的Method,可以继续扩展功能
});
} else if (viewMetaData.viewType == "3DView") {
// ======== 判断是否为3D图纸 ========
// 获取DOM元素
var dom4Show = document.getElementById('domId');
// 配置参数
var config = new Glodon.Bimface.Viewer.Viewer3DConfig();
config.domElement = dom4Show;
// 创建viewer3D对象
var viewer3D = new Glodon.Bimface.Viewer.Viewer3D(config);
// 添加模型
viewer3D.addView(viewToken);
// 监听添加view完成的事件
viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
// 渲染3D模型
viewer3D.render();
// 调用viewer3D对象的Method,可以继续扩展功能
});
}
}
function failureCallback(error) {
console.log(error);
};
</script>
</body>
</html>