webgl天空盒边界缝隙_基于webGL技术的3D库ThingJS支持天空盒技术实现

描述三维天空的技术有平面型天空(Sky Plane)、天空穹庐(Sky Dome)、天空盒(Sky Box)三种类型。基于webGL技术的3D库ThingJS支持天空盒技术实现。

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

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

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

```javascript

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贴图，比如银河、蓝天、黑夜，可以供不同场景使用。

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

```javascript

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);

```

JS语言一直名列前茅的热门程序，ThingJS懂得抓住你们的心。

webgl天空盒边界缝隙_基于webGL技术的3D库ThingJS支持天空盒技术实现相关推荐

three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
JAVA发布栅格图层_基于 WebGL实现自定义栅格图层踩坑实录
以下内容转载自totoro的文章<WebGL-Y轴翻转踩坑实录> 作者:totoro 链接:blog.totoroxiao.com/webgl-flipY- 来源:blog.totorox ...
matlab 点云特征_基于点云的3D障碍物检测
击上方"新机器视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达基于点云的3D障碍物检测主要有以下步骤: 点云数据的处理基于点云 ...
lisp标定高程_基于Auto Lisp的局部高程点批量检查与修改技术
基于 Auto Lisp 的局部高程点批量检查与修改技术唐争气 ; 胡润希 [期刊名称] <电脑编程技巧与维护> [年 ( 卷 ), 期] 2013(000)002 [摘要] 针对 CA ...
三维点云数据处理软件供技术原理说明_基于三维激光扫描的粮仓储量测量中点云数据处理技术的研究...
内容简介: 基于三维激光扫描的粮仓储量测量中点云数据处理技术的研究,毕业论文,共74页,30308字. 内容摘要三维激光扫描仪(又称"激光雷达")能够快速.有效地获取空间点的三维 ...
webgl天空盒边界缝隙_OPENGL中天空盒缝隙消除的解决办法
使用天空盒时常遇到缝隙无法消除的问题,最简单的方法是使用边缘截取 ( GL_CLAMP_TO_EDGE ):总是忽略边界.处于纹理边缘或者靠近纹理边缘的纹理单元都用作纹理计算,但是不包括边界上的纹理 ...
three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师梁神一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
python 3d大数据可视化_基于Python的数据可视化库pyecharts介绍
什么是pyecharts? pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生 ...
autocad python二次开发_基于Python AutoCAD ActiveX 二次开发，pyautocad应用技术
AutoCAD应用程序开发系列基于Python AutoCAD ActiveX 二次开发技术主要库:pyautocad==0.2.0 内容#:基于Python AutoCAD ActiveX 二次 ...
em算法图像模糊检测_基于EM算法的眼底OCT图像反卷积去模糊技术
引言光学相干层析成像技术(Optical coherence tomography, OCT)作为一种发展迅速的视网膜检查手段,具有分辨率高.灵敏性强.成像速度快.检查方便以及对眼睛无伤害等特点[. ...

webgl天空盒边界缝隙_基于webGL技术的3D库ThingJS支持天空盒技术实现

webgl天空盒边界缝隙_基于webGL技术的3D库ThingJS支持天空盒技术实现相关推荐

最新文章

热门文章