专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

一款建筑信息模型的BIM轻量化开发引擎

ins518 2024-11-27 15:15:58 技术文章 12 ℃ 0 评论

bimface是一款以模型及图纸轻量化解析与展示为基础，结合地理信息系统(GIS)、模型渲染与效果呈现、项目文档管理等扩展功能，


用户无需安装插件，直接在网页和手机上打开模型和图纸，最大支持10G模型（建筑面积超40万方），开发者无需掌握图形技术，只要熟悉网页开发，就能快速实现模型和图纸在线浏览的功能；基于前端SDK和后端API，扩展功能特性非常方便，支持rvt、skp、dwg 38种文件格式。

可以看一下前端生成一个模型所需要的一个简单示例代码

<!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>获取模型属性</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>
    <!-- 引用BIMFACE的JavaScript显示组件库 -->
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8">
    </script>
</head>
<body>
    <div class='main'>
        <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
        <div class='model' id="domId"></div>
    </div>
    <script type="text/javascript">
        var viewer3D;
        var app;
        var viewToken = 'ff0fcb0fba2b4af9b095989cc56773be';
        // 初始化显示组件
        var options = new BimfaceSDKLoaderConfig();
        options.viewToken = viewToken;
        BimfaceSDKLoader.load(options, successCallback, failureCallback);

        function successCallback(viewMetaData) {
            if (viewMetaData.viewType == "3DView") {
                // ======== 判断是否为3D模型 ========        
                // 获取DOM元素
                var dom4Show = document.getElementById('domId');
                var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
                webAppConfig.domElement = dom4Show;
                // 创建WebApplication
                app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
                // 添加待显示的模型
                app.addView(viewToken);
                // 从WebApplication获取viewer3D对象
                viewer3D = app.getViewer();
                // 监听添加view完成的事件
                viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
                    //自适应屏幕大小
                    window.onresize = function () {
                        viewer3D.resize(document.documentElement.clientWidth, document.documentElement
                            .clientHeight - 40);
                    }
                    // 调用viewer3D对象的Method，可以继续扩展功能
                    // 渲染3D模型
                    viewer3D.render();
                });
            }
        }

        function failureCallback(error) {
            console.log(error);
        }

    </script>
    </body>
    </html>

引入bimface的js即可，其中viewToken是通过后端sdk生成的。效果图如下

还有很多的功能比如模型的构件选中、隔离、标签、图纸模型联动、设置模型视角、批注、爆炸效果、火焰效果等等，下面展示部分效果图

图纸模型二三维联动


剖切盒

引线标签

模型批注

漫游功能

隔离构件


火焰效果

有需要可视化管理建筑或其他模型的需求可以参考，希望本文对你有所帮助。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表