hightopo 3D 智慧物業/地產管理系統

 

概述

　　該博文主要展現本人採用 ht for web 提供的可視化技術，對智慧房產、智慧物業相關方向的可視化呈現作的一點嘗試。

　　但願該案例能在 web3d 和數據可視化大行其道的當下爲你們拓寬思路，提供一些關於室內場景呈現的靈感。

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

 

目標應用場景

　　1.智慧物業，針對小區物業管理、住戶平常產生的水電氣費用的檢測等提供可視化解決方案。

　　2.商品房銷售可在大屏上對室內佈局、各類戶型進行展現，給購房客戶展現各個戶型的精裝修效果，更能夠無縫對接VR。

　　3.針對蛋殼、58同城、優客逸家等租房平臺，在PC端和移動端進行3D實景展現，讓租客們能夠足不出戶就瞭解到各個房源的佈局和設備設施，以及其餘租戶的用戶滿意度。

 

採用 ht 實現樓層動畫

 1 if (data.getAnimation()) {
 2     return data.getAnimation();
 3 } else {
 4     return {
 5         narrow: {
 6             from: 0.012*5*3,
 7             to: 0.01*5*3,
 8             duration: 250,
 9             easing: 'Linear',
10             next: 'setPositionBack',
11             onUpdate: function (value) {
12                 this.setSize3d(value, (0.012*5*3-value+(0.01*5*3)), value);
13             },
14             onComplete: () => {
15                 //...
16             }
17         },
18         setPositionBack: {
19             //...
20         },
21         allFloorsMove: {
22             //...
23         },
24         setPositionForward: {
25             //...
26         },
27         expand: {
28             from: 0.01*5*3,
29             to: 0.012*5*3,
30             duration: 250,
31             easing: 'Linear',
32             onUpdate: value => {
33                 this.currentSelectedFloor.setSize3d(value, (0.012*5*3-(value-(0.01*5*3))), value);
34             },
35             onComplete: () => {
36                 this.openLightOrNot(true);
37                 this.animationControl(1, false);
38                 this.changeFloorText();
39             }
40         },
41         start: ['narrow']
42     }
43 }

　　換層動畫設計成 5 個階段：

　　　　1.當前樓層收縮成正常大小

　　　　2.完成後經過設置的 next 進入後退動畫

　　　　3.待當前樓層退回到主軸後，全樓層共同平移

　　　　4. 平移到目標高度後，觸發樓層前移

　　　　5.前移完畢再進行變大變矮的動畫

　　該動畫採用重寫 ht.DataModel 的 getDataAnimation() 方法，對擁有動畫須要的三角體和樓層對象（ht.Node）進行動畫匹配，在第一隻執行時返回包含動畫邏輯的Anim，

　　此後以每 50 毫秒 （3幀左右一次）的頻率執行動畫，

this.dm3d.enableAnimation(50);

　 因爲可點選的三角體處於持續上下移動和繞自身旋轉的動畫中，故 3D 動畫不會中止，無需調用 disableAnimation 方法，此時就須要特別注意動畫執行間隔和多個動畫階段中 duration 的搭配，謹防內存泄漏。

　三角體動畫設置很少贅述：

 1 if (this.animationFlags.triangle3dAnimation) {
 2     if (data.getAnimation()) {
 3         return data.getAnimation();
 4     } else {
 5         return {
 6             up: {
 7                 from: 90,
 8                 to: 130,
 9                 next: "down",
10                 duration: 1500,
11                 easing: 'Linear',
12                 onUpdate: function (value) {
13                     this.setPosition3d(this.getPosition3d()[0], value, this.getPosition3d()[2]);
14                 }
15             },
16             down: {
17                 from: 130,
18                 to: 90,
19                 duration: 1500,
20                 easing: 'Linear',
21                 onUpdate: function (value) {
22                     this.setPosition3d(this.getPosition3d()[0], value, this.getPosition3d()[2]);
23                 }
24             },
25             rotate: {
26                 from: 0,
27                 to: 360,
28                 duration: 3000,
29                 easing: 'Linear',
30                 onUpdate: function (value) {
31                     this.setRotationY(value * Math.PI / 180);
32                 }
33             },
34             start: ['up', 'rotate']
35         }
36     }
37 }

　　效果展現：

 

ht.graph.GraphView 中的按鈕動畫實現

　　按鈕和樓層動畫能夠相互觸發，樓層按鈕動畫分爲兩種類型

　　　　1.縱向平移，同樓層動畫

 1 translate: {
 2     from: 0,
 3     to: this.distanceToMoveButton,
 4     duration: 1250,
 5     easing: 'Linear',
 6     onUpdate: value => {
 7         const list = this.dm2d.getDatas();
 8         list.each(item => {
 9             if (/^button/.test(item.getTag())) {
10                 const yPos = this.buttonsCurrentYPos[item.a('buttonNum')] + value;
11                 item.setPosition(item.getPosition()['x'], yPos);
12             }
13         });
14     },
15 }

　　　　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 樓層按鈕動畫須要用到的四個關鍵方法：

 1 /**
 2  * 獲取縮放動畫類型
 3  */
 4 getScaleTypeForButton(currentSize, nextSize, turn) {
 5     //...
 6 }
 7 
 8 /**
 9  * 設置 button 的縮放類型
10  */
11 setScaleTypeToButton(selectedFloor) {
12     //...
13 }
14 
15 /**
16  * 計算 button 須要移動的距離
17  * @param {ht.Data} selectedFloor - 選中的樓層
18  * @param {ht.Data} selectedFloorBefore - 以前選中的樓層
19  */
20 countDistanceToMoveButton(selectedFloor, selectedFloorBefore) {
21     //...
22 }
23 
24 /**
25  * 更新各個 button 所在高度
26  */
27 refreshButtonsCurrentYPos() {
28     //...
29 }

　　效果展現：

 

2D頁面 與 3D場景的交互

　　該 demo 主要涉及到兩種處 2d 與 3d 交互：

　　　　1.按鈕與樓層之間的相互觸發。

　　　　　　設置一個控制器：

1 /**
2 * 動畫控制器
3 * @param {Number} animateNum - 動畫編號
4 * @param {Boolean} flag - 開啓或關閉
5 */
6 animationControl(animateNum, flag) {
7 　　//...
8 }

　　　　2.點選三角體，右側信息欄對應租戶信息出現邊框

　　　　　　簡單說來就是 2D 3D 經過 tag 聯繫， 改變 style 中邊框大小來高亮選中項

1 switch (tag) {
2     case 'triangle0':
3         this.dm2d.getDataByTag('rightRect1').s('shape.border.width', 3);
4         break;
5     //...
6 }
7 //...
8 // 清空
9 this.dm2d.getDataByTag('rightRect1').s('shape.border.width', 0);

　　效果展現：

 

PS

　　任何疑問或建議歡迎留言討論。