请选择 进入手机版 | 继续访问电脑版
分享
首页 资讯 产品知识 查看内容

3D场景中BIM剖切面【包围盒】参数化开发

发表于 2021-2-6 15:44
zzv_icon1011 zzr_icon0
摘要: #前端# #BIM# #物联网可视化开发#1. 3D场景内的模型剖切2. 剖切对象初始化3. 剖切面事件控制简介:建筑楼宇是一个实体,室内往往被遮挡,对于建筑设计、楼宇管理和设备维护造成了一定的困难。如果想了解房屋内部的复 ...
#前端# #BIM# #物联网可视化开发#
  1. 1. 3D场景内的模型剖切
  2. 2. 剖切对象初始化
  3. 3. 剖切面事件控制
3D场景中BIM剖切面【包围盒】参数化开发
简介:建筑楼宇是一个实体,室内往往被遮挡,对于建筑设计、楼宇管理和设备维护造成了一定的困难。如果想了解房屋内部的复杂构造情形,这时候利用假想的剖切面进行几何切割,室内的构造情况露出。ThingJS引入了3D剖切面功能,参数化开发方法更精确,直接在屏幕呈现剖切效果。

3D场景内的模型剖切

ThingJS支持对模型的方盒子六面剖切以及任意面剖切,让我们来看看官方示例示怎么做到的吧。如效果图所示,在3D场景视图内生成一个矩形剖切框,顺应箭头所指的方向长按鼠标拖动可剖切模型。
初始化剖切功能的操作环境,需要考虑的一点,就是如何快速准确剖切想要的位置?

剖切对象初始化

涉及到的剖切对象是要进行剖切的建筑,首先查询该建筑,设置建筑为不可拾取的状态,包括建筑内部楼层。
开启剖切动作之后,建筑周围出现剖切包围盒,基于对象创建更多样式提高辨识度。
步骤一,创建剖切包围盒的几何体,其中type值可以为plane, box, sphere等
步骤二,设置父物体为剖切方向的箭头,拖动指引箭头则剖切面会被激活
步骤三,设置剖切面样式,如颜色、透明度、双面渲染,以包围盒的效果出现


/** * 创建方向箭头和剖切面 */ function create() { if (cuttingPlane == null) { // 创建方向箭头 cuttingArrow = app.create({ type: 'Thing', // 类型 id: 'arrow', // id url: '/api/models/5ff9ae7331e742d0bf572be34e86f651/0/gltf/', // 模型地址 position: cuttingBoxOptions.initPos, // 位置 complete: function () { registerEvent(); } }); } if (cuttingPlane == null) { // 创建剖切面 cuttingPlane = app.create({ type: 'Plane', // 类型 id: 'plane', // id width: cuttingBoxOptions.planeWidth, // 宽度 height: cuttingBoxOptions.planeHeight, // 高度 parent: cuttingArrow, // 设置父物体为创建的方向箭头 style: { color: '#11DAB7', // 颜色 opacity: 0.2, // 透明度 doubleSide: true, // 双面渲染 boundingBox: true, // 包围盒 boundingBoxColor: '#11DAB7' // 包围盒颜色 } }) cuttingPlane.rotateX(-90); // 绕X轴旋转-90° cuttingPlane.pickable = false; // 设置不可拾取 cuttingPlane.inheritPickable = false; // 设置拾取状态不受父物体影响 cuttingPlane.inheritScale = false; // 设置缩放不受父物体影响 } }

剖切面事件控制

最后加入注册事件,形成有意义的剖切动作,尽量符合用户的在线操作习惯。
步骤一,鼠标操作为主,方向箭头绑定鼠标进行剖切
步骤二,设置剖切时需要的箭头位置、剖切高度和方向
步骤三,别忘了摄像机视角,剖切时关闭默认旋转事件
显示剖切面
3D场景中BIM剖切面【包围盒】参数化开发
剖切后的建筑体
3D场景中BIM剖切面【包围盒】参数化开发


ThingJS利用参数化控制剖切面,前端可随时更改输入值,并利用鼠标或键盘来驱动剖切面,轻松实现可视化剖切功能。