前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3D场景中BIM剖切面参数化开发ThingJS

3D场景中BIM剖切面参数化开发ThingJS

原创
作者头像
森友鹿锘
修改2023-09-24 18:45:21
1.1K0
修改2023-09-24 18:45:21
举报
文章被收录于专栏:ThingJS 3D开发

#前端# #BIM# #物联网可视化开发#

  1. 3D场景内的模型剖切
  2. 剖切对象初始化
  3. 剖切面事件控制

简介:建筑楼宇是一个实体,室内往往被遮挡,对于建筑设计、楼宇管理和设备维护造成了一定的困难。如果想了解房屋内部的复杂构造情形,这时候利用假想的剖切面进行几何切割,室内的构造情况露出。ThingJS引入了3D剖切面功能,参数化开发方法更精确,直接在屏幕呈现剖切效果。

3D场景内的模型剖切

ThingJS支持对模型的方盒子六面剖切以及任意面剖切,让我们来看看官方示例示怎么做到的吧。如效果图所示,在3D场景视图内生成一个矩形剖切框,顺应箭头所指的方向长按鼠标拖动可剖切模型。

初始化剖切功能的操作环境,需要考虑的一点,就是如何快速准确剖切想要的位置?

剖切对象初始化

涉及到的剖切对象是要进行剖切的建筑,首先查询该建筑,设置建筑为不可拾取的状态,包括建筑内部楼层。

开启剖切动作之后,建筑周围出现剖切包围盒,基于对象创建更多样式提高辨识度。

步骤一,创建剖切包围盒的几何体,其中type值可以为plane, box, sphere等

步骤二,设置父物体为剖切方向的箭头,拖动指引箭头则剖切面会被激活

步骤三,设置剖切面样式,如颜色、透明度、双面渲染,以包围盒的效果出现

代码语言:javascript
复制
/**
 * 创建方向箭头和剖切面
 */
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;  // 设置缩放不受父物体影响
    }
}

剖切面事件控制

最后加入注册事件,形成有意义的剖切动作,尽量符合用户的在线操作习惯。

步骤一,鼠标操作为主,方向箭头绑定鼠标进行剖切

步骤二,设置剖切时需要的箭头位置、剖切高度和方向

步骤三,别忘了摄像机视角,剖切时关闭默认旋转事件

显示剖切面

剖切后的建筑体

结尾

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

关于ThingJS

ThingJS平台提供物联网3D可视化组件,让3D开发更轻松!直接Javascript调用3D脚本,基于200个3D开发源码示例,让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效,同20万个开发者一起成为数字孪生技术创新者!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 3D场景内的模型剖切
  • 剖切对象初始化
  • 剖切面事件控制
  • 结尾
  • 关于ThingJS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档