前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >教你给场景添加天空盒,超简单!

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

原创
作者头像
thingjs
修改2021-07-08 18:22:39
9650
修改2021-07-08 18:22:39
举报

数字孪生可视化场景中,如果要更换场景天空,例如白天、黑夜、雾霾效果等,这个时候可以考虑采用天空盒技术。可以为数字孪生可视化场景里添加上一片逼真的天空,使得世界更加美丽真实。

天空盒是一个包裹整个场景的立方体,可以很好地渲染并展示整个场景环境。天空盒其实就是将一个立方体展开,然后在六个面上贴上对应的贴图,在实际的渲染中,将这个立方体始终罩在数字孪生可视化场景摄像机的周围,让数字孪生可视化场景摄像机始终处于这个立方体的中心位置,然后根据视线与立方体的交点的坐标,来确定究竟要在哪一个面上进行纹理采样。所以在实时渲染中,因为照相机随着物体一起移动,在肉眼看来,物体大小几乎是没什么变化的,这种就是天空盒技术。

天空盒是用于增强数字孪生可视化场景表现力的一个常用技术,它一般通过在相机周围包裹一个纹理来实现。为了保持视角一致,需要校正天空盒,摄像机飞行完之后,当前的视角变化了,天空盒就需要校正——获取自定义图层tilelayer1的类型、名称和URL,添加此图层到基础的地图集合列表即可。

目前 ThingJS 内置提供 BlueSky , MilkyWay ,Night , CloudySky, White , Dark 这几种天空盒,使用 app.skyBox 属性设置数字孪生可视化背景天空盒。

代码语言:javascript
复制
app.skyBox = "Night"; 
 
// 取消设置天空盒
app.skyBox = null;

设置背景天空盒时间线使用 app.skyEffect 属性。

代码语言:javascript
复制
app.skyEffect = {
 // 显示光源位置
 showHelper: false,
 // 光源扩散大小
 turbidity: 10,
 // 大气散射 
 rayleigh: 2, 
 // 时间 [0~24]
 time: 17.6, 
 // 水平角度
 beta: 30 
}; 
 
// 取消设置效果
app.skyEffect = null;

效果如下:

当 app.skyBox 和 app.skyEffect 同时生效时会有些问题,需要选取其中一个生效,关闭另一个。

—————————————————

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档