#前端# #BIM# #物联网可视化开发#
1. 3D场景内的模型剖切
2. 剖切对象初始化
3. 剖切面事件控制
简介：建筑楼宇是一个实体，室内往往被遮挡，对于建筑设计、楼宇管理和设备维护造成了一定的困难。如果想了解房屋内部的复杂构造情形，这时候利用假想的剖切面进行几何切割，室内的构造情况露出。ThingJS引入了3D剖切面功能，参数化开发方法更精确，直接在屏幕呈现剖切效果。
demo链接：http://www.thingjs.com/guide/?m=sample
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;
// 设置缩放不受父物体影响 }}
剖切面事件控制
最后加入注册事件，形成有意义的剖切动作，尽量符合用户的在线操作习惯。
步骤一，鼠标操作为主，方向箭头绑定鼠标进行剖切
步骤二，设置剖切时需要的箭头位置、剖切高度和方向
步骤三，别忘了摄像机视角，剖切时关闭默认旋转事件显示剖切面
剖切后的建筑体
结尾
ThingJS利用参数化控制剖切面，前端可随时更改输入值，并利用鼠标或键盘来驱动剖切面，轻松实现可视化剖切功能。
关于ThingJS
ThingJS平台提供物联网3D可视化组件，让3D开发更轻松！直接Javascript调用3D脚本，基于200个3D开发源码示例，让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效，同20万个开发者一起成为数字孪生技术创新者！
1. 3D场景内的模型剖切
2. 剖切对象初始化
3. 剖切面事件控制
简介：建筑楼宇是一个实体，室内往往被遮挡，对于建筑设计、楼宇管理和设备维护造成了一定的困难。如果想了解房屋内部的复杂构造情形，这时候利用假想的剖切面进行几何切割，室内的构造情况露出。ThingJS引入了3D剖切面功能，参数化开发方法更精确，直接在屏幕呈现剖切效果。
demo链接：http://www.thingjs.com/guide/?m=sample
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;
// 设置缩放不受父物体影响 }}
剖切面事件控制
最后加入注册事件，形成有意义的剖切动作，尽量符合用户的在线操作习惯。
步骤一，鼠标操作为主，方向箭头绑定鼠标进行剖切
步骤二，设置剖切时需要的箭头位置、剖切高度和方向
步骤三，别忘了摄像机视角，剖切时关闭默认旋转事件显示剖切面
剖切后的建筑体
结尾
ThingJS利用参数化控制剖切面，前端可随时更改输入值，并利用鼠标或键盘来驱动剖切面，轻松实现可视化剖切功能。
关于ThingJS
ThingJS平台提供物联网3D可视化组件，让3D开发更轻松！直接Javascript调用3D脚本，基于200个3D开发源码示例，让你全面了解物联网可视化开发逻辑。场景搭建-3D脚本开发-数据对接-项目部署的一站式服务让开发更高效，同20万个开发者一起成为数字孪生技术创新者！
