cesium场景控制(二)：自定义天空盒子

1、原理：

天空盒子和由六张图片按照一定的规则拼成了一个正方体，然后地球居于正方体中心。展开对应图如下：

2、自定义天空盒子：

let defaultSkybox:any = new Cesium.SkyBox({
    sources:{
        positiveX: '/skyBox/px.jpg',
        negativeX: '/skyBox/nx.jpg',
        positiveY: '/skyBox/py.jpg',
        negativeY: '/skyBox/ny.jpg',
        positiveZ: '/skyBox/pz.jpg',
        negativeZ: '/skyBox/nz.jpg'
    }
});

3、近地天空盒子：

let currSkyBox:any = new Cesium.SkyBox({
    sources:{
        positiveX: '/skyBoxNear/px.png',
        negativeX: '/skyBoxNear/nx.png',
        positiveY: '/skyBoxNear/py.png',
        negativeY: '/skyBoxNear/ny.png',
        positiveZ: 'skyBoxNear/pz.png',
        negativeZ: 'skyBoxNear/nz.png'
    }
});

4、天空盒子切换

//场景渲染事件，获取相机高度 
const postRender = () => { 
    let position = viewer.camera.position; 
    let height = Cesium.Cartographic.fromCartesian(position).height; 
    if (height < 230000) { 
        if (currSkyBox) viewer.scene.skyBox = currSkyBox; 
        viewer.scene.skyAtmosphere.show = false; 
    } else { 
        if (defaultSkybox) viewer.scene.skyBox = defaultSkybox; 
        viewer.scene.skyAtmosphere.show = true; 
    } 
} 
//监听场景渲染事件 
addPostRender = () => { 
    viewer.scene.skyBox.show = true; 
    viewer.scene.postRender.addEventListener(postRender); 
} 
//移除场景渲染事件 
removePostRender = () => { 
    viewer.scene.postRender.removeEventListener(postRender);
    viewer.scene.skyBox.show = false; 
}

5、实现效果

1）天空盒子

2）近地天空盒子

项目地址：github.com/DLFouge/vue…

欢迎指正与star