调用方式-进阶

根据文件类型分别实例化Viewer2D,Viewer3D对应的WebApplication,能分别显示模型或图纸,包括BIMFACE提供的默认UI。

适用场景

在Viewer2D和Viewer3D提供的默认UI的基础上进行扩展开发。

使用说明

  • 使用viewToken初始化显示组件
  • 判断待显示的文件是2D还是3D
  • 根据文件类型不同,实例化不同的WebApplication
  • 实例化WebApplication后,可以从WebApplication中获取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"></div>
<script type="text/javascript">
var viewer2D;
var  apps;
    // 指定待显示的模型或图纸(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 webAppConfig = new Glodon.Bimface.Application.WebApplication2DConfig();
            webAppConfig.domElement = dom4Show;
            // 创建WebApplication
            var app = new Glodon.Bimface.Application.WebApplication2D(webAppConfig);
            // 添加待显示的图纸
            app.load(viewToken);
            // 从WebApplication获取viewer2D对象
             viewer2D = app.getViewer();
            // 调用viewer2D对象的Method,可以继续扩展功能
            // your code
            viewer2D.addEventListener(Glodon.Bimface.Viewer.Viewer2DEvent.Loaded, function () {    
            })    
        } else if (viewMetaData.viewType == "3DView") {    
            // ======== 判断是否为3D模型 ========        
            // 获取DOM元素
            var dom4Show = document.getElementById('domId');
            var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
            webAppConfig.domElement = dom4Show;    
            // 创建WebApplication
            var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);    
            // 添加待显示的模型
            app.addView(viewToken);
            // 从WebApplication获取viewer3D对象
            var viewer3D = app.getViewer();    
            // 监听添加view完成的事件
            viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
                // 调用viewer3D对象的Method,可以继续扩展功能
                // viewer3D.hideViewHouse();
                // 渲染3D模型
                viewer3D.render();
            });    
        }else if(viewMetaData.viewType == "drawingView"){    
            // ======== 判断是否为矢量图纸 ========            
            var ViewerEvent = Glodon.Bimface.Viewer.ViewerDrawingEvent;
            //var viewerDrawing;
            var dom4Show = document.getElementById('domId');
            var WebAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();
            WebAppConfig.domElement = dom4Show;
            WebAppConfig.drawingUrl = viewMetaData.drawingUrl;
            WebAppConfig.viewToken = viewMetaData.viewToken;
            WebAppConfig.staticHost = viewMetaData.staticHost;
            // 创建WebApplication
            apps = new Glodon.Bimface.Application.WebApplicationDrawing(WebAppConfig);
            apps.load(viewToken); 
            viewer2D = apps.getViewer();
        }else if (viewMetaData.viewType == "rfaView") {    
            // ======== 判断是否为族文件 ========            
            // 获取DOM元素
            var dom4Show = document.getElementById('domId');            
            // 配置参数
            var config = new Glodon.Bimface.Application.WebApplicationRfaConfig();
            config.domElement = dom4Show;    
            // 创建viewer3D对象
            app = new Glodon.Bimface.Application.WebApplicationRfa(config);    
            // 添加模型
            viewer3D=app.addView(viewToken);            
            // 监听添加view完成的事件
            app.addEventListener(Glodon.Bimface.Application.WebApplicationRfaEvent.ViewAdded, function() {
                app.render();
                // 渲染3D模型
                //viewer3D.render();    
                // 隐藏viewHouse
                 viewer3D.hideViewHouse();
                 // 自动旋转
                 viewer3D.startAutoRotate(-1);                
            });
        }    
    }
    function failureCallback(error) {
        console.log(error);
    };
</script>
</body>
</html>