官方示例（十六）：3D場景中BIM剖切面參數化開發ThingJS

#前端# #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萬個開發者一起成爲數字孿生技術創新者！