最近几日由于工作中需要把全景图加载到三维场景中，之前网上搜索过，做过的都是结合其他框架来实现，如PhotoSphereViewer。但是当我们需要在Cesium做的项目中，来做数据显示增强的时候（如：点云和全景图叠合）就显得力不从心了，毕竟PhotoSphereViewer是基于threejs来实现的，需要一起来显示的时候就需要控制Cesium的相机和threejs的相机。因此为了更加有效的实现Cesium中场景与全景图完美叠合，就需要Cesium加载全景图。可能我说的叠合有点抽象，那么我用一张图来解释一下。
点云叠合全景，增强显示
和点云数据叠合有个好处就是点云数据拉近看的时候，点云比较稀疏看不清形状，这个时候结合全景图，就能更加清晰的呈现出模型本身。
那么如何实现cesium中加载全景图呢？其实很简单，总结为如下几步：
1、使用EllipsoidGeometry绘制一个球
2、给这个球贴上纹理，由于我们贴的时候一般都贴到球的表面，但是我们看的时候视角是从球里面往外面看的，所以需要对纹理做一个反转
3、固定相机位置为球的中心点，这样就可以绕着这个点往四周看了
我这里把使用的贴纹理的shader贴出来供大家参考：
function getVS() {
return "attribute vec3 position3DHigh;\
attribute vec3 position3DLow;\
attribute vec2 st;\
attribute float batchId;\
varying vec2 v_st;\
void main()\
{\
vec4 p = czm_computePosition();\
v_st=st;\
p = czm_modelViewProjectionRelativeToEye * p;\
gl_Position = vec4(p.x,p.y,p.z,p.w);\
}\ ";
}
function getFS() {
return "varying vec2 v_st;\
void main()\
{\
czm_materialInput materialInput;\
czm_material material=czm_getMaterial(materialInput,v_st);\
vec4 color=vec4(material.diffuse + material.emission,material.alpha);\
if(color.x==1.0&&color.y==1.0&&color.z==1.0&&color.w==1.0) color=vec4(vec3(0.0,0.0,0.0),0.0);\
gl_FragColor =color;\
}\ ";
}
function getMS() {
return "czm_material czm_getMaterial(czm_materialInput materialInput,vec2 v_st)\
{\
vec2 cood = vec2(1.0 - v_st.x, v_st.y);\
vec4 color = texture2D(image, cood);\
czm_material material = czm_getDefaultMaterial(materialInput);\
material.diffuse= color.rgb;\
material.alpha=color.a;\
return material;\
}\";
}
最后附一张叠合的效果图：
点云+全景图
