首页 > 网页制作 >Cesium可调节星空夜景与星星闪烁

Cesium可调节星空夜景与星星闪烁

来源：互联网 2026-07-15 19:38:15

基于CesiumPostProcessStage后处理着色器，实现可调节星空夜景效果。通过纹理坐标遮罩区分天空与地面，在天空区域生成星点；利用正弦周期函数使星星产生独立呼吸闪烁动画；通过滑块实时调节夜暗浓度与星星亮度，实现从微夜色到深夜纯黑的无缝过渡；叠加冷蓝色夜空底色，提升画面通透深邃感。

Cesium 夜景效果实战：基于后处理着色器实现可调节星空闪烁

在前两篇实战中，我们分别实现了 Cesium 的黄昏浓度自定义调节（昼夜光影柔化、傍晚氛围）和雾气浓度可控特效（远近雾化、大气朦胧感）。本次案例聚焦夜景效果，依然基于 Cesium PostProcessStage 后处理着色器方案，手写一套超高质感、可调节、可开关、带真实星空闪烁的夜景效果。

案例环境

本案例中 Cesium 版本为 1.141.0。

效果演示

Cesium可调节星空夜景与星星闪烁

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

实现效果

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;
}