添加 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 参数，天空颜色会发生变化，但地图颜色不会发生变化，造成地面和天空交界部分过渡不太自然，需要调整雾的颜色以适应。