在氣象中,常常見到剖面圖。地形剖面主要研究地貌對降雨、氣流的影響作用;緯度高度剖面圖主要用來分析降雨的某些條件,如濕層深厚、上幹下濕、風向風速等。而在數字孿生可視化場景中往往也需要用到剖切面功能,用以了解房屋內部構造和方便維護。
建築樓宇都是實體,室內都是被遮擋的,對於建築設計、樓宇管理和設備維護造成一定的困難。如果想了解房屋內部的複雜構造情形,這時候可以利用剖切面進行幾何切割,室內的構造情况露出。ThingJS剖切盒功能,能够直接在數字孿生可視化場景中呈現剖切效果。
先來看一下剖切盒效果:
數字孿生可視化場景添加剖切盒功能後,添加左側按鈕點擊顯示剖切盒,拖拽剖切盒的每個剖切面對應白色模型,可對選定的對象進行剖切。確保需要頂牌的物體自定義屬性列錶中包含該示例運行後頂牌信息詳情面板中的屬性。
涉及到的剖切對象是要進行剖切的數字孿生可視化建築,首先查詢該建築,設置建築為不可拾取的狀態,包括建築內部樓層。開啟剖切動作之後,建築周圍出現剖切包圍盒,基於對象創建更多樣式提高辨識度。
1、創建剖切包圍盒的幾何體,其中type值可以為plane, box, sphere等。
2、設置父物體為剖切方向的箭頭,拖動指引箭頭則剖切面會被激活。
3、設置剖切面樣式,如顏色、透明度、雙面渲染,以包圍盒的效果出現。
完整代碼如下:
// 加載場景代碼
var app = new THING.App({
url: 'models/uinnova',
skyBox: 'BlueSky'
});
// 引入資源文件
THING.Utils.dynamicLoad([
'/guide/examples/plugins/cuttingbox/cuttingBox.min.v0.1.0.js', // 剖切盒脚本
],
function () {
// 加載完成事件
app.on('load', function (ev) {
// 設置攝像機比特置和目標點
app.camera.position = [12.381987189259789, 35.70039578315924, 90.09563419485903];
app.camera.target = [-31.69618343165883, 4.873235854917229, 14.203971365975518];
// 獲取剖切對象,此處選取場景中的建築
var obj = app.query('.Building')[0];
obj.pickable = false; // 設置建築不可被拾取
obj.floors.visible = true; // 設置建築的樓層顯示
obj.renderOrder = 10; // 設置建築的渲染順序
// 初始化剖切盒類
var cutBoxClass = new CuttingBox({
object: obj
})
// 剖切面顯示或隱藏狀態
var state = true;
new THING.widget.Button('顯示/隱藏剖切盒', function () {
app.query('["物體類型"= "消防水箱"]').visible = false; // 剖切時隱藏消防水箱
app.query('["物體類型"= "排烟風機"]').visible = false; // 剖切時隱藏排烟風機
cutBoxClass.showOrHiddenArrow(state); // 顯示/隱藏剖切盒
state = !state;
})
new THING.widget.Button('重置', function () {
// 攝像機飛行到某比特置
app.camera.flyTo({
'position': [12.381987189259789, 35.70039578315924, 90.09563419485903],
'target': [-31.69618343165883, 4.873235854917229, 14.203971365975518],
'time': 1500,
'complete': function () {}
});
app.query('["物體類型"= "消防水箱"]').visible = true; // 重置時顯示消防水箱
app.query('["物體類型"= "排烟風機"]').visible = true; // 重置時顯示排烟風機
cutBoxClass.resetClippingPlane(); // 重置剖切盒
})
});
},
true, // 選填,是否帶時間戳
true // 選填,是否按順序下載
)
支持對模型的方盒子五面的任意面剖切,在數字孿生可視化場景視圖內生成一個矩形剖切框,順應箭頭所指的方向長按鼠標拖動可剖切模型。怎麼樣,是不是簡單粗暴又好用!