基于WebGL的三维室内可视化逻辑建模 thingjs_实际场景建模 web_ThingJS_小锘的博客-程序员秘密

技术标签: 3D可视化  ThingJS  物联网  javascript  

室内空间最直观的定义是被墙面、地板面和屋顶面围合而成的有界空间。与室外空间相比,ThingJS平台的室内空间的三维可视化要求更加精细,如果不能很好地表达容易对用户造成误导!

与室外空间相比,室内空间的层次结构较为明显,各楼层间主要是通过楼梯、电梯等这些通道进行连接,除建筑本身结构外还有门窗、栏杆、楼梯等要素,要注意这些人工要素的功能性表达。尤其是室内空间通道的特殊性,制作室内模型的时候要注意空间划分,包括单楼层通道,例如门、走廊,以及连接楼层间的垂直通道,包括步梯、扶梯、直梯,其中步梯一般为建筑结构的一部分,而扶梯和直梯属于机械设施。

如何对室内空间进行划分呢?整个建筑是室内空间的主体,建筑是由外部轮廓和各楼层组成的,如图所示。

外轮廓

建筑的外部轮廓也是整个室内空间的外部轮廓,它是室内空间与外部空间的分界线,即建筑轮廓以内为整个室内空间。人们若想由室外空间到达室内空间就必须通过轮廓上固定的通道。由于对土地资源的节约利用,大型建筑大多包括地下和地上两部,因此,建筑的外部轮廓也是由地上和地下两部分组成。建筑的外部轮廓主要包括:轮廓主体和轮廓通道。

轮廓的主体主要包括:墙面、地板面、屋顶面三部分,这三部分组合在一起将组合成一个闭合的室内空间。
在这里插入图片描述

轮廓通道

轮廓通道是连接“封闭空间”与外部的“出入口”,根据其功能可以将其分为两类,一是用于人员、车辆通行的通道,如门、室内停车场入口等;二是用于采光、通风、排水的通道,如窗户、排气通道等。第一类通道需要在地图上进行表达,第二类通道需根据其特点、重要性以及实际需求选择表达。

三维室内场景基本都带了默认的层级切换脚本,让相机视角进入建筑内,因此出入口不仅是建筑可视化的一部分,也是获取建筑内信息的一个虚拟通道。

进出层级官方示例>>

var app = new THING.App({
    
    url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});

app.on('load', function (ev) {
    
 // 场景加载完成后 进入园区层级
    app.level.change(ev.campus);
});

// 监听建筑层级的 EnterLevel 事件
app.on(THING.EventType.EnterLevel, ".Building", function (ev) {
    
 // 当前进入的层级对象
 var current = ev.current;
 // 上一层级对象
 var preObject = ev.previous;

 // 如果当前层级对象的父亲是上一层级对象(即正向进入)
 if (current.parent === preObject) {
    
        console.log("从 " + preObject.type + " 进入了 " + current.type);
 }
 else {
    
        console.log("进入 " + current.type + "(从 " + preObject.type + " 退出)");
 }
});

// 监听建筑层级的 LeaveLevel 事件
app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {
    
 // 要进入的层级对象
 var current = ev.current;
 // 上一层级对象(退出的层级)
 var preObject = ev.previous;

 if (current.parent === preObject) {
    
        console.log("退出 " + preObject.type + " 进入 " + current.type);
 }
 else {
    
        console.log("退出 " + preObject.type + " ,返回 " + current.type);
 }
})

室内空间

建筑的楼层是室内空间的主体,其结构相对复杂,同一建筑不同楼层间的结构也存在很大的差异,它是人们活动的主要区域,比如展厅和办公区域是不同的类型。从空间划分来看,楼层可以分为空间单元、障碍物、室内通道、物体,其中空间单元由墙体、柜台、货架等障碍物分割出来,相对独立;障碍物由墙体、围栏组成。室内通道有走廊、门、大厅等水平通道,以及楼梯、直梯、扶梯等垂直通道,物体以可移动实物为主,如室内摆放的花盆、桌椅、设备。

模型制作解析

该项目要求制作一栋办公楼的室内模型,楼内共10层,包括9层地上办公区和1层地下停车场,其中第二层是一个展厅,风格华丽。为了增强逼真感,与管理人员进行协调后,对室内进行了较为全面的照片采集工作,基于CAD建筑设计图和照片来制作室内模型,室外的建筑里面也会按照建筑设计图,与室内模型一同制作。具体分为5个步骤:
在这里插入图片描述

1. 基础数据整理

首先将建筑设计图中的各个平面图、立面图、剖面图分离出来单独保存,图面上只保存建筑、轴线等主要的信息。然后,将各个图导入CampusBuilder客户端,根据空间关系拼合到对应的位置。为了方便制作,默认按照正南正北的方向摆放。为了方便使用,每张设计图都应打组,分别保存在相应的图层之中冻结。制作时只显示需要的图纸图层即可。

2. 室内结构建模

项目指定分层展示效果,所以制作时使用实体墙,对楼梯、电梯井、管道井等都进行建模。使用照片上的真实纹理对模型进行贴图,效果逼真。
在这里插入图片描述

如二层展厅主要通过照片贴图的方式对室内效果进行表现,在CampusBuilder内直接拖拽照片贴图,设置相关贴图参数,比3dsMAX中使用材质球和灯光渲染效果更为直接和高效。
在这里插入图片描述

二楼展厅的整体模型展示:
在这里插入图片描述

3. 室内陈设物品建模

根据实拍照片,对室内陈设物品进行建模,包括办公设备、办公用品、绿植等,ThingJS平台支持3D模型扩展,避免重复建模。这里对室内物品信息管理没有应用需求,所以将其与各层建筑结构附加,按层展示。
在这里插入图片描述

有很多室内的三维建模在ThingJS平台完成,常用的可视化套件组合有CampusBuilder+ThingJS平台+ThingDepot(3D模型库),在CampusBuilder使用贴图功能,就能够实现逼真的建筑物、设备,ThingDepot提供已搭建好的模型,节省了建模时间,随后搭建好的模型接入ThingJS平台,实现灯光等渲染效果。

ThingJS是一款基于webgl的3D框架,比three.js更为顶层!能够实现室内的交互、POI的显示、楼层选择及表达方式的切换,支持跨平台多终端的应用,平台自动设置场景光照效果,让3D开发更加轻松,喜欢的点个赞再走哦~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ThingJS/article/details/109786318

智能推荐

Flink 读写MySQL数据(DataStream和Table API)-程序员秘密

Flink提供了基于JDBC的方式,可以将读取到的数据写入到MySQL中;本文通过两种方式将数据下入到MySQL数据库,其他的基于JDBC的数据库类似,另外,Table API方式的Catalog指定为Hive Catalog方式,持久化DDL操作。Maven依赖,包含了Hive Catalog的相关依赖 DataStream方式读写MySQL数据Table API的方式读写MySQL,其中Flink的Catalog使用Hive Catalog的方式MySQL中的数据..........

now.set(Calendar.HOUR_OF_DAY, 8)最好设置时区_YYRRMRDN的博客-程序员秘密

1,Calendar now = Calendar.getInstance();2,now.setTimeInMillis(System.currentTimeMillis());3,LOGGER.info("System.currentTimeMillis------------------"+System.currentTimeMillis());4,LOGGER.info("tmp[...

HttpClient post请求调取接口 例子_全冉的博客-程序员秘密

package com.xiaojukeji.service;import java.io.IOException;import java.util.List;import org.apache.http.Consts;import org.apache.http.HttpStatus;import org.apache.http.NameValuePair;import org.

终于有人把中台说清楚了_微笑很纯洁的博客-程序员秘密

最近朋友圈被中台刷屏了,那么今天我们来说说中台!缘起百度指数搜索“中台”,可以发现,中台一词前几年几乎都没有搜索,反倒是今年5月21号开始蹭蹭往上涨!百度指数仔细搜索了一...

[js] 举例说明Object.defineProperty会在什么情况下造成循环引用导致栈溢出?_defineproperty 的循环引用_普通网友的博客-程序员秘密

[js] 举例说明Object.defineProperty会在什么情况下造成循环引用导致栈溢出?var data = { count: 1, value: 2}Object.defineProperty(data, 'count', { enumerable: true, configurable: true, get: function () { console.log('你访问了count', this.count); // 循环读取da

HDU1002A + B Problem II_爱编程的大李子的博客-程序员秘密

Problem DescriptionI have a very simple problem for you. Given two integers A and B, your job is to calculate the Sum of A + B.InputThe first line of the input contains an integer T(1<=T<=20) which means the number of test cases. Then T lines foll

随便推点

java用16进制的方式打印byte数组_java打印byte数组的值_不会写代码的猴子的博客-程序员秘密

public static String bytes2hex(byte[] bytes) { StringBuilder sb = new StringBuilder(); String tmp; sb.append("["); for (byte b : bytes) { // 将每个字节与0xFF进行与运算,然后转化为10进制,然后借助于Integer再转化为16进制 tmp = Integer.toHexString(0xFF &amp.

MATLAB自动驾驶工具箱的简单使用_你看不见我写的blog的博客-程序员秘密

文章目录1. 开环场景2. 闭环场景3.使用UNREAL 4引擎进行SCENARIO SIMULATION1. 开环场景drivingScenarioDesigner输入命令,打开场景编辑器随便加入一些道路和车辆加入车辆行驶路径点,并加入一台camera导出到SIMULINK,自动生成slx与mat文件SCENARIO模块输出的车辆数据格式如下,可用Bus模块分解,也可作为...

vue中给v-html的元素添加样式失效_vue3通过v-html的内容添加class然后给他加样式为什么不起作用_aliven1的博客-程序员秘密

html部分:直接在less中给v-html中的标签增加样式失效css部分:在引入less的同时,单独引入处理v-html的样式文件样式文件的写法:

Tarjan算法流程和简要证明_tarjan算法证明_keyboarder_zsq的博客-程序员秘密

声明:一下许多内容摘自: 北京大学暑期课《ACM/ICPC竞赛训练》强连通分支、桥和割点 北京大学信息学院 郭炜不建议初学者直接看这篇博文 可以先了解一下Tarjan算法的具体流程,再来看证明。 推荐:全网最!详!细!tarjan算法讲解强连通分量如果有向图G的每两个顶点都强连通,称G为强连通图。 非强连通图有向图的极大强连通子图,称为强连通分量。算法流程DFN[i]表示 遍历到 i 点时是

nginx 代理imap pop smtp_weixin_34297300的博客-程序员秘密

为什么80%的码农都做不了架构师?>>> ...

UVA1208 LA3171 Oreon【最小生成树+Kruskal算法】_uva 1208 - oreon_海岛Blog的博客-程序员秘密

OreonTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 2245 Accepted: 596DescriptionIn the 25th century, civilization is struck by a series of calamities that eventually led mankind to b...

推荐文章

热门文章

相关标签