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

教你给场景添加天空盒,超级简单!

时间:2023-04-05 23:44:29 HTML5

在数字孪生可视化场景中,如果想改变场景天空,比如白天、黑夜、雾霾效果等,此时可以考虑使用skybox技术。可以在数字孪生可视化场景中加入逼真的天空,让世界变得更加美丽和真实。天空盒是一个包裹整个场景的立方体,可以很好地渲染和展示整个场景环境。天空盒其实就是展开一个立方体,然后在六个面贴上相应的贴图。在实际渲染中,立方体始终覆盖在数字孪生可视化场景相机周围,使数字孪生可视化场景相机始终处于该位置。立方体的中心位置,然后根据视线与立方体的交点坐标,确定对哪个表面进行纹理采样。所以在实时渲染中,由于相机随物体移动,物体的大小肉眼几乎没有变化。这就是天空盒技术。天空盒是一种常用技术,用于增强数字双胞胎可视化场景的表现力,通常是通过在相机周围包裹纹理。为了保持视角一致,需要对天空盒进行校正。相机飞行后,当前视角发生变化,需要修正天空盒——获取自定义图层tilelayer1的类型、名称和URL,将此图层添加到基础地图集合列表中即可。目前,ThingJS提供了BlueSky、MilkyWay、Night、CloudySky、White和Dark内置天空盒。使用app.skyBox属性设置数字孪生可视化背景天空盒。app.skyBox="夜晚";//取消设置天空盒app.skyBox=null;使用app.skyEffect属性设置背景天空盒时间线。app.skyEffect={//显示光源位置showHelper:false,//光源扩散大小浊度:10,//大气散射瑞利:2,//时间[0~24]time:17.6,//水平角β:30};//取消设置效果app.skyEffect=null;效果如下:当app.skyBox和app.skyEffect同时生效时,会出现一些问题。您需要选择其中一个才能生效并关闭另一个。————————————————————数字孪生可视化:https://www.thingjs.com/