添加 SKY

loading

直接把 threejs 的 sky 示例搬过来即可

//添加Sky
const sky = new Sky();
sky.scale.setScalar(450000 * 1000);
viewer.scene.add(sky);

const sun = new THREE.Vector3();
/// GUI
const effectController = {
    turbidity: 3.5,
    rayleigh: 3.5,
    mieCoefficient: 0.005,
    mieDirectionalG: 0.7,
    elevation: 2,
    azimuth: 180,
    exposure: viewer.renderer.toneMappingExposure,
};
function guiChanged() {
    const uniforms = sky.material.uniforms;
    uniforms["turbidity"].value = effectController.turbidity;
    uniforms["rayleigh"].value = effectController.rayleigh;
    uniforms["mieCoefficient"].value = effectController.mieCoefficient;
    uniforms["mieDirectionalG"].value = effectController.mieDirectionalG;
    const phi = THREE.MathUtils.degToRad(90 - effectController.elevation);
    const theta = THREE.MathUtils.degToRad(effectController.azimuth);
    sun.setFromSphericalCoords(1, phi, theta);
    uniforms["sunPosition"].value.copy(sun);
    viewer.renderer.toneMappingExposure = effectController.exposure;
    viewer.renderer.render(viewer.scene, viewer.camera);
}

const gui = new GUI();
gui.add(effectController, "turbidity", 0.0, 20.0, 0.1).onChange(guiChanged);
gui.add(effectController, "rayleigh", 0.0, 4, 0.001).onChange(guiChanged);
gui.add(effectController, "mieCoefficient", 0.0, 0.1, 0.001).onChange(guiChanged);
gui.add(effectController, "mieDirectionalG", 0.0, 1, 0.001).onChange(guiChanged);
gui.add(effectController, "elevation", 0, 90, 0.1).onChange(guiChanged);
gui.add(effectController, "azimuth", -180, 180, 0.1).onChange(guiChanged);
gui.add(effectController, "exposure", 0, 1, 0.0001).onChange(guiChanged);

guiChanged();

TIP

调整 sky 参数，天空颜色会发生变化，但地图颜色不会发生变化，造成地面和天空交界部分过渡不太自然，需要调整雾的颜色以适应。