分享
查看: 1383|回复: 0

[分享] ThingJS之天空盒技术官方示例,让世界更仿真

[复制链接]

ThingJS之天空盒技术官方示例,让世界更仿真

发表于 2020-9-23 20:18:01 来自 分享 阅读模式 倒序浏览
zzv_icon1383 zzr_icon0 查看全部

无论是模拟室内的场景还是模拟室外的场景,很多时候需要利用天空盒来烘托整个场景的气氛。ThingJS贴心供应10种天空盒背景,让你试个够!

引用地图组件脚本之后地球相机参数就改变,需要校正天空盒。为什么偏偏是天空盒呢?这就得问一下,天空盒的原理是什么?OpenGL中天空盒的思想就是绘制一个大的立方体,然后将观察者放在立方体的中心,当相机移动时,这个立方体也跟着相机一起移动,这样相机就永远不会运动到场景的边缘。

ThingJS之天空盒技术官方示例,让世界更仿真

所以在实时渲染中,因为照相机随着物体一起移动,在肉眼看来,物体大小几乎是没什么变化的,这种就是天空盒技术玩的把戏。

为了保持视角一致,需要校正天空盒,摄像机飞行完之后,当前的视角变化了,天空盒就需要校正——获取自定义图层tilelayer1的类型、名称和URL,添加此图层到基础的地图集合列表即可。

  1. THING.widget.Button('飞到北京', function () {
  2. app.camera.earthFlyTo({
  3. lonlat:[116.46429991746982, 39.98638104131414],
  4. height:5000,
  5. pitch:15,
  6. complete:function (){
  7. //飞完根据当前视角校正天空盒
  8. CMAP.Util.correctSkyBox();
  9. var tileLayer1 = app.create({
  10. type: 'TileLayer',
  11. name: 'tileLayer1',
  12. url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
  13. });
  14. map.baseLayers.add(tileLayer1);
复制代码


地球上使用天空盒又有另一套简单的技术实现。所谓的天空盒其实就是将一个立方体展开,然后在六个面上贴上相应的贴图,官方提供多达8种彩色背景gif贴图,比如银河、蓝天、黑夜,可以供不同场景使用。

先引用地图组件脚本,创建完地球相机参数后需校正天空盒,让摄像机始终处于这个立方体的中心位置,就对了。示例如下:


  1. var app = new THING.App({
  2. skyBox: 'MilkyWay' // 设置天空盒为银河git
  3. });
  4. // 引用地图组件脚本
  5. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
  6. var map = app.create({
  7. type: 'Map',
  8. backgroundColor: [0, 0, 0],
  9. });
  10. //创建完地球相机参数会改变,需校正天空盒
  11. CMAP.Util.correctSkyBox();
  12. var tileLayer1 = app.create({
  13. type: 'TileLayer',
  14. name: 'tileLayer1',
  15. url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
  16. });
  17. map.baseLayers.add(tileLayer1);
复制代码


ThingJS让世界更加仿真!


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t