Cesium自定义可调节星空夜景星星闪烁完整实现

在前两篇实战教程中，我们分别实现了Cesium的黄昏浓度自定义调节（昼夜光影柔化、傍晚氛围）和雾气浓度可控特效（远近雾化、大气朦胧感）。本次带来的则是夜景效果——依然基于Cesium PostProcessStage后处理着色器方案，从零手写一套具备超高质感、可调节、可开关、并带有真实星空闪烁效果的夜景系统。 **本实战案例基于Cesium 1.141.0版本开发** 动态效果演示如下所示：

静态效果截图如下所示：

**实现的核心效果：** **1. 场景智能分区星空** 通过纹理坐标Y轴遮罩计算，精准区分天空区域与地面区域。仅在画面上半部分的天空区域生成星点，山脉与地面完全不会出现星星，严格贴合现实物理逻辑。 **2. 自然星星呼吸闪烁动画** 基于`sin(time)`正弦周期函数，为每一颗星星赋予独立的随机明暗节奏。星星并非统一闪烁，而是呈现出零零散散、忽明忽暗、微弱呼吸般的动态效果，真实感极强。 **3. 可交互式夜景浓度调节** 延续本系列统一的参数化可控思路（与之前两篇的雾效、黄昏特效逻辑一致）。通过滑块即可实时修改`nightStrength`数值，支持： - 微调夜空昏暗程度 - 控制星星整体亮度浓度 - 实现「微夜色 → 深夜纯黑」的无缝过渡 **4. 冷蓝色深夜夜空基调** 普通夜景往往只是简单压暗画面，整体发灰发黑，缺乏夜空质感。本次效果叠加了低饱和度的冷蓝夜空底色，模拟真实深夜大气色调，画面通透深邃、不显死板，夜景层次感极为丰富。 **核心实现原理简明梳理：** 1. **画面压暗**：通过nightStrength系数整体降低画面亮度，构建夜晚基础环境。 2. **天空遮罩裁切**：利用smoothstep平滑过渡，精准锁定天空渲染区域。 3. **随机星点生成**：借助数学随机函数生成高密度、均匀分布的星点位置。 4. **时间动态插值**：逐帧更新时间变量，驱动星星实现呼吸闪烁。 5. **夜空色调混合**：叠加冷蓝底色，显著提升夜景的通透质感。 **完整代码** **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="isNightSky">
                <div class="slider-label" style="color:#FFFFFF;">夜景昏暗程度：{{ Number(nightStrength).toFixed(2) }}div>                
                <el-slider
                    class="night-slider"
                    v-model.number="nightStrength"
                    :min="0"
                    :max="0.8"
                    :step="0.01"
                    @input="updateNightStrength"
                />
                
            div>            
            <el-button type="primary" size="default" class="btn" @click="flyTo">初始位置el-button>            
            <el-button type="primary" size="default" class="btn" @click="nightControl">
                {{ isNightSky ? '关闭星空夜景' : '开启星空夜景' }}
            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;
}

**总结：** 本次通过原生着色器算法，真正模拟了物理级别的夜空表现：分区天空、动态闪烁、可控浓度、色调真实。所有代码均已开源，可直接复用，配合前两篇的黄昏与雾效，即可拼凑出一套完整的大气环境特效系统。无论是用于三维GIS可视化、智慧城市夜景展示，还是Cesium数字孪生项目，这套星空夜景方案都能显著提升场景的沉浸感与视觉品质。