当前位置: 首页 > Web前端 > HTML5

视觉场景实现切框功能,简单易用!

时间:2023-04-05 15:13:08 HTML5

在气象学中,经常会看到剖面图。地形剖面主要用于研究地貌对降雨和气流的影响;纬度和高度剖面主要用于分析降雨的某些条件,如深湿层、干燥的顶部和潮湿的底部、风向和风速等。在数字孪生可视化场景中,通常需要切面功能来理解房屋内部结构,便于维修。建筑物都是实体,内部全部覆盖,这给建筑设计、建筑管理和设备维护带来了一定的困难。如果想了解房屋内部的复杂结构,可以用剖切面做几何切割,室内结构就暴露无遗了。ThingJS的裁切框功能可以在数字孪生可视化场景中直接呈现裁切效果。先来看看裁切框的效果:在数字孪生可视化场景中添加裁切框功能后,添加左键点击显示裁切框,将裁切框对应的各个裁切面拖拽到白色模型,对选中的对象进行切割。确保需要顶层卡片的对象的自定义属性列表包含示例运行后顶层卡片信息详细信息面板中的属性。涉及的切割对象为待切割的数字孪生可视化建筑。首先查询建筑物,将建筑物设置为不可拾取状态,包括建筑物的内部楼层。启用切片动作后,建筑物周围会出现一个切片边界框,并根据对象创建更多样式以提高识别度。1.创建切割边界框的几何体,type值可以是plane、box、sphere等。2.将父对象设置为切割方向的箭头,拖动导向箭头激活切割平面。3.设置切割面样式,如颜色、透明度、双面渲染,以显示为边界框。完整代码如下://加载场景代码varapp=newTHING.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){//setting摄像机位置和目标点app.camera.position=[12.381987189259789,35.70039578315924,90.09563419485903];app.camera.target=[-31.69618343165883,4.873235854917229,14.203971365975518];//获取剖切对象,此处选择取场景中的建筑varobj=app.query('.Building')[0];obj.pickable=false;//设置建筑物不可拾取obj.floors.visible=true;//设置建筑物的楼层显示obj.renderOrder=10;//设置建筑物的渲染顺序//初始化切割框类varcutBoxClass=newCuttingBox({object:obj})//显示或隐藏切割平面varstate=true;newTHING.widget.Button('显示/隐藏切割框',function(){app.query('["objecttype"="firewatertank"]').visible=false;//切割时隐藏消防水箱app.query('["objecttype"="Smokeexhaustfan"]').visible=false;//切割时隐藏排烟风扇cutBoxClass.showOrHiddenArrow(state);//显示/隐藏剪切框state=!state;})newTHING.widget.Button('重置',function(){//摄像机飞行到某位置app.camera.flyTo({'position':[12.381987189259789,35.70039578315924,90.09563419485903],'target':[-31.69618343165883,4.873235854917229,14.203971365975518],'time':1500,“完成”:功能(){}});app.query('["对象类型"="消防水箱"]').visible=true;//重置时显示消防水箱app.query('["objecttype"="exhaustfan"]').visible=true;//在重置时显示排风扇cutBoxClass.resetClippingPlane();//重置cutbox})});},true,//可选,是否有时间戳true//可选,是否按顺序下载)支持在模型方框的五边切割任意面,在数字孪生中生成矩形切割框可视化场景视图,跟随箭头方向长按并拖动鼠标,对模型进行切割,是不是简单易用!