ThingJS天空盒技术更适合物联网场合哦_天空盒培训怎么样-优快云博客

本文链接：https://blog.youkuaiyun.com/ThingJS/article/details/108760437

博客探讨了在物联网场景下，ThingJS的天空盒技术相比Unity的适用性。天空盒作为实时渲染中的技巧，通过绘制大立方体并随相机移动保持视角一致。文中提到在地球场景中，需要校正天空盒以适应视角变化，并介绍了如何添加和使用自定义图层进行天空盒的调整。官方提供了多种背景贴图选项，使天空盒适应不同场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

谁有适用于unity的18种不同的大自然天空盒？开玩笑，ThingJS天空盒技术更适合物联网场合哦！

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

所以在实时渲染中，因为照相机随着物体一起移动，在肉眼看来，物体大小几乎是没什么变化的，这种就是天空盒技术玩的把戏。
为了保持视角一致，需要校正天空盒，摄像机飞行完之后，当前的视角变化了，天空盒就需要校正——获取自定义图层tilelayer1的类型、名称和URL，添加此图层到基础的地图集合列表即可。

THING.widget.Button('飞到北京', function () {
    app.camera.earthFlyTo({
      lonlat:[116.46429991746982, 39.98638104131414],
      height:5000,
      pitch:15,
      complete:function (){
//飞完根据当前视角校正天空盒
CMAP.Util.correctSkyBox();

var tileLayer1 = app.create({
    type: 'TileLayer',
    name: 'tileLayer1',
    url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
  });
  map.baseLayers.add(tileLayer1);

地球上使用天空盒又有另一套简单的技术实现。所谓的天空盒其实就是将一个立方体展开，然后在六个面上贴上相应的贴图，官方提供多达8种彩色背景gif贴图，比如银河、蓝天、黑夜，可以供不同场景使用。
先引用地图组件脚本，创建完地球相机参数后需校正天空盒，让摄像机始终处于这个立方体的中心位置，就对了。示例如下：

var app = new THING.App({
  skyBox: 'MilkyWay' // 设置天空盒为银河git
});

// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
  var map = app.create({
    type: 'Map',
    backgroundColor: [0, 0, 0],
  });
  //创建完地球相机参数会改变,需校正天空盒
  CMAP.Util.correctSkyBox();

  var tileLayer1 = app.create({
    type: 'TileLayer',
    name: 'tileLayer1',
    url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
  });
  map.baseLayers.add(tileLayer1);

```ThingJS很多资源支持存储到官方，访问开发不怕错，就是懂你~