首页 > 网页制作 >Cesium黄昏效果：一键开关，滑块调节浓烈度

Cesium黄昏效果：一键开关，滑块调节浓烈度

来源：互联网 2026-07-02 08:27:01

前言此前已分享过基于Cesium的下雪效果和雾气效果，均通过后处理与粒子系统实现。本文继续介绍天气特效系列中的自定义黄昏日落氛围效果，探讨如何让三维场景在黄昏时段更具沉浸感。本次依然采用 PostProcessStage 后处理着色器，实现功能包括：一键开启/关闭黄昏效果。滑块实时调节黄昏浓

前言

长期稳定更新的攒劲资源： >>>点此立即查看<<<

此前已分享过基于Cesium的下雪效果和雾气效果，均通过后处理与粒子系统实现。本文继续介绍天气特效系列中的自定义黄昏日落氛围效果，探讨如何让三维场景在黄昏时段更具沉浸感。

本次依然采用 PostProcessStage 后处理着色器，实现功能包括：

一键开启/关闭黄昏效果。
滑块实时调节黄昏浓烈程度。
远景分层暖雾渐变，增强日落层次感。

该方案可直接应用于数字孪生、三维场景氛围美化、环境仿真等场景。

演示动态图示如下：

演示地址如下：

3d.xiazhi.tech/3d-demos/#/…

效果特点

非简单全局变色，而是屏幕竖向分层渲染：天空远景的黄昏暖色更浓郁，近景的地形与建筑则更自然。
通过 uniform 对外暴露强度参数，支持滑块实时动态调节。

实现思路

原理并不复杂：借助Cesium的后处理管线，自定义一个片元着色器。具体流程如下：

对原始场景纹理进行采样。
整体压暗，模拟傍晚光线渐弱。
叠加暖橙日落色调。
依据屏幕纵向坐标实现远景分层暖雾效果。
外部绑定滑块数值，动态控制黄昏混合强度。

完整代码

1. template 结构

 复制代码<template>
    <div class="main">        
        <div class="content" ref="content" id="earth">div>        <div class="btn-border" v-if="isLoading">            <div class="slider-border" v-if="isDusk">
                <div class="slider-label">黄昏浓烈程度：{{ Number(duskStrength).toFixed(2) }}div>                
                <el-slider
                  class="dusk-slider"
                  v-model.number="duskStrength"
                  :min="0"
                  :max="0.4"
                  :step="0.01"
                  @input="updateDuskStrength"
                />
            div>            
            <el-button type="primary" size="default" class="btn" @click="flyTo">初始位置el-button>            
            <el-button type="primary" size="default" class="btn" @click="duskControl">
                {{ isDusk  '关闭黄昏效果' : '开启黄昏效果' }}
            el-button>
        div>        
        <div class="loading" v-if="!isLoading">Loading...div>    div>
template>

2. script 代码

 复制代码

3. CSS 样式代码

 复制代码* {
    margin: 0;
    padding: 0;
}.main {
    width: 100%;
    height: 100vh;
    position: relative;
}.content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #000000;
}.btn-border {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
    display: flex;
    justify-content: start;
    align-items: stretch;
}.btn {
    margin-left: 20px;
    cursor: pointer;
}.slider-border {
    width: 260px;
    margin-right: 20px;
    position: relative;
    top: -9px;
}.slider-label {
    font-size: 14px;
}