关于javascript:可视化场景实现剖切盒功能简单粗暴好用

35次阅读

共计 1879 个字符,预计需要花费 5 分钟才能阅读完成。

在气象中,经常见到剖面图。地形剖面次要钻研地貌对降雨、气流的影响作用;纬度高度剖面图次要用来剖析降雨的某些条件,如湿层深厚、上干下湿、风向风速等。而在数字孪生可视化场景中往往也须要用到剖切面性能,用以理解屋宇外部结构和不便保护。
修建楼宇都是实体,室内都是被遮挡的,对于建筑设计、楼宇治理和设施保护造成肯定的艰难。如果想理解屋宇外部的简单结构情景,这时候能够利用剖切面进行几何切割,室内的结构状况露出。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 // 选填,是否按程序下载
)

反对对模型的方盒子五面的任意面剖切,在数字孪生可视化场景视图内生成一个矩形剖切框,适应箭头所指的方向长按鼠标拖动可剖切模型。怎么样,是不是简略粗犷又好用!

正文完
 0