HTML5 3D 在智慧物业/地产管理系统中的应用

概述

　　该博文主要展示采用 HT for Web 提供的可视化技术，对智慧房产、智慧物业相关方向的可视化呈现做的一点尝试。

　　传统的 智慧房产/楼宇自动化/智慧物业 常会采用 BIM（建筑信息模型 Building information modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件，但这些 BIM 建模模型的数据往往过于庞大臃肿，绝大部分细节信息对楼宇自控意义不大，反而影响拖累了行业 Web SCADA 或 Web 组态监控的趋势。

　　采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，能够实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。

　　希望该案例能在 Web3D 和数据可视化大行其道的当下为大家拓宽思路，提供一些关于室内场景呈现的灵感。

　　链接地址：http://www.hightopo.com/demo/estate/

目标应用场景

　　1.智慧物业，针对小区物业管理、住户日常产生的水电气费用的检测等提供可视化解决方案。

　　2.商品房销售可在大屏上对室内布局、各种户型进行展示，给购房客户展示各个户型的精装修效果，更可以无缝对接VR。

　　3.针对蛋壳、58同城、优客逸家等租房平台，在PC端和移动端进行3D实景展示，让租客们可以足不出户就了解到各个房源的布局和设备设施，以及其他租户的用户满意度。

采用 HT 实现楼层动画

 if (data.getAnimation()) {
     return data.getAnimation();
 } else {
     return {
         narrow: {
             from: 0.012*5*3,
             to: 0.01*5*3,
             duration: 250,
             easing: 'Linear',
             next: 'setPositionBack',
             onUpdate: function (value) {
                 this.setSize3d(value, (0.012*5*3-value+(0.01*5*3)), value);
             },
             onComplete: () => {
                 //...
             }
         },
         setPositionBack: {
             //...
         },
         allFloorsMove: {
             //...
         },
         setPositionForward: {
             //...
         },
         expand: {
             from: 0.01*5*3,
             to: 0.012*5*3,
             duration: 250,
             easing: 'Linear',
             onUpdate: value => {
                 this.currentSelectedFloor.setSize3d(value, (0.012*5*3-(value-(0.01*5*3))), value);
             },
             onComplete: () => {
                 this.openLightOrNot(true);
                 this.animationControl(1, false);
                 this.changeFloorText();
             }
         },
         start: ['narrow']
     }
 }

　　换层动画设计成 5 个阶段：

　　　　1.当前楼层收缩成正常大小

　　　　2.完成后通过设置的 next 进入后退动画

　　　　3.待当前楼层退回到主轴后，全楼层共同平移

　　　　4. 平移到目标高度后，触发楼层前移

　　　　5.前移完毕再进行变大变矮的动画

　　该动画采用重写 ht.DataModel 的 getDataAnimation() 方法，对拥有动画需要的三角体和楼层对象（ht.Node）进行动画匹配，在第一次执行时返回包含动画逻辑的Anim，

　　此后以每 50 毫秒 （3帧左右一次）的频率执行动画，

this.dm3d.enableAnimation(50);

　 由于可点选的三角体处于持续上下移动和绕自身旋转的动画中，故 3D 动画不会停止，无需调用 disableAnimation 方法，此时就需要特别注意动画执行间隔和多个动画阶段中 duration 的搭配，谨防内存泄漏。

　三角体动画设置不多赘述：

 if (this.animationFlags.triangle3dAnimation) {
     if (data.getAnimation()) {
         return data.getAnimation();
     } else {
         return {
             up: {
                 from: 90,
                 to: 130,
                 next: "down",
                 duration: 1500,
                 easing: 'Linear',
                 onUpdate: function (value) {
                     this.setPosition3d(this.getPosition3d()[0], value, this.getPosition3d()[2]);
                 }
             },
             down: {
                 from: 130,
                 to: 90,
                 duration: 1500,
                 easing: 'Linear',
                 onUpdate: function (value) {
                     this.setPosition3d(this.getPosition3d()[0], value, this.getPosition3d()[2]);
                 }
             },
             rotate: {
                 from: 0,
                 to: 360,
                 duration: 3000,
                 easing: 'Linear',
                 onUpdate: function (value) {
                     this.setRotationY(value * Math.PI / 180);
                 }
             },
             start: ['up', 'rotate']
         }
     }
 }

　　效果展示：

ht.graph.GraphView 中的按钮动画实现

　　按钮和楼层动画可以相互触发，楼层按钮动画分为两种类型

　　　　1.纵向平移，同楼层动画

 translate: {
     from: 0,
     to: this.distanceToMoveButton,
     duration: 1250,
     easing: 'Linear',
     onUpdate: value => {
         const list = this.dm2d.getDatas();
         list.each(item => {
             if (/^button/.test(item.getTag())) {
                 const yPos = this.buttonsCurrentYPos[item.a('buttonNum')] + value;
                 item.setPosition(item.getPosition()['x'], yPos);
             }
         });
     },
 }

　　　　2.根据是否是当前层进行放大缩小，缩放的逻辑稍微有些绕脑，主要分为两类

　　　　　　a.只放大，只缩小

　　　　　　b.会跨越中间层，如当前层为F1，点击F4就会出现F2先放大再缩小的情况。

　　　　　　本人将缩放动画分为10类型

start: ['translate', 'scaleBM', 'scaleBL', 'scaleMB', 'scaleMM', 'scaleML', 'scaleML2', 'scaleLB', 'scaleLM', 'scaleLM2', 'scaleLL']

　　　　其中， middle to little  /  little to middle / little to little 这三种情况会出现跨中间行，即先大后小的动画

　　设置 2D 楼层按钮动画需要用到的四个关键方法：

 /**
  * 获取缩放动画类型
  */
 getScaleTypeForButton(currentSize, nextSize, turn) {
     //...
 }

 /**
  * 设置 button 的缩放类型
  */
 setScaleTypeToButton(selectedFloor) {
     //...
 }

 /**
  * 计算 button 需要移动的距离
  * @param {ht.Data} selectedFloor - 选中的楼层
  * @param {ht.Data} selectedFloorBefore - 之前选中的楼层
  */
 countDistanceToMoveButton(selectedFloor, selectedFloorBefore) {
     //...
 }

 /**
  * 更新各个 button 所在高度
  */
 refreshButtonsCurrentYPos() {
     //...
 }

　　效果展示：

2D页面 与 3D场景的交互

　　该 demo 主要涉及到两处 2d 与 3d 交互：

　　　　1.按钮与楼层之间的相互触发。

　　　　　　设置一个控制器：

 /**
 * 动画控制器
 * @param {Number} animateNum - 动画编号
 * @param {Boolean} flag - 开启或关闭
 */
 animationControl(animateNum, flag) {
 　　//...
 }

　　　　2.点选三角体，右侧信息栏对应租户信息出现边框

　　　　　　简单说来就是 2D 3D 通过 tag 联系， 改变 style 中边框大小来高亮选中项

 switch (tag) {
     case 'triangle0':
         this.dm2d.getDataByTag('rightRect1').s('shape.border.width', 3);
         break;
     //...
 }
 //...
 // 清空
 this.dm2d.getDataByTag('rightRect1').s('shape.border.width', 0);

　　效果展示：

PS

　　任何疑问或建议欢迎留言讨论。