BIMFACE与网页前端设计

这是一个bimface项目前端连接项目!

前端长这样:
在这里插入图片描述

~
是一个之前的项目,还是记录下来,不然可能会忘记,
又是来记录,项目开发经历:
是跟别人合作的项目,帮忙写前端,
还是感谢大家付出,
侵联删。
~
介绍一下BIM,bimface是和其有关的软件开发集合吧

BIM:

在这里插入图片描述

建筑信息模型(Building Information Modeling)是建筑学、工程学及土木工程的新工具。建筑信息模型或建筑资讯模型一词由Autodesk所创的。它是来形容那些以三维图形为主、物件导向、建筑学有关的电脑辅助设计。当初这个概念是由Jerry Laiserin把Autodesk、奔特力系统软件公司、Graphisoft所提供的技术向公众推广
~
是计算机与建筑的建模之间进行各种联系:
在这里插入图片描述使用这个比较熟悉的平台:

如何使用平台,简介

在这里插入图片描述把做好的建模上传到平台,通过API接口可以从网页中显示,
上传做好的建模,如下图:
在这里插入图片描述可以通过调用定义好的viewtoken来进行网页渲染:
在这里插入图片描述得到viewtoken,
在这里插入图片描述调用方法:
在这里插入图片描述去取得(复制粘贴)其设置好的html代码,只要更改viewtoken,在运行html文件,就可以看到你上传的3D模型:
在这里插入图片描述很多功能可以使用并添加:

开始项目:

在这里插入图片描述

生成页面代码直接用的其平台的生成代码:
来增加一点东西:
在这里插入图片描述

1.导航栏

老直接调库了,bootstrap在很多CTF平台搭建中很常见:
在这里插入图片描述熟悉的下拉菜单,dropdown-toggle
在这里插入图片描述利用这个原理,加上一个监控:
在这里插入图片描述监控效果:
在这里插入图片描述点击导航栏按钮效果:
在这里插入图片描述在这里插入图片描述

2.左侧菜单

例子:
在这里插入图片描述熟悉的boot侧面导航:
在这里插入图片描述然后添加一堆按钮,来调用js函数,js函数是从平台扣的,也可以自定义:
点击实现着火特效:
在这里插入图片描述可以自定义,根据构件ID来使指定位置起火,可以添加更多操作,这里不一一赘述。
~
封装好数量蛮多的js文件,并集中调用:
在这里插入图片描述

3.连接Echart图表

效果:
在这里插入图片描述导入图表函数:
在这里插入图片描述在这里插入图片描述
可以使用ajax等方法,将其和建筑中所放置的物联网硬件设备,来进行实时显示和交互,
这里暂时不能实现,但可以作为一个想法,可以增加的东西和功能很多:

最终效果:

在这里插入图片描述IOT与建模与数据库等管理的结合,是值得深思熟虑的。

  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

F1gh4

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值