JSAPIThree 天空和天氣系統學習筆記：營造真實的環境氛圍詳情 - 學習筆記,地圖開發星星上的絲瓜博客

作為一個剛開始學習 mapvthree 的小白，今天要學習天空和天氣系統了！聽説這個系統可以讓場景更有氛圍感，還能模擬真實的天氣效果！想想就期待！

第一次聽説天空系統

今天在文檔裏看到了"天空"這個詞，一開始我還以為是背景色，結果查了一下才知道，原來這是用來營造場景氛圍的環境系統！

文檔説天空系統可以：

提供場景的背景和光照
模擬真實的晝夜交替
營造不同的氛圍感
配合天氣系統實現雨雪霧等效果

我的理解：簡單説就是給場景"加個天空"，讓場景看起來更真實、更有氛圍！

第一步：發現天空系統

作為一個初學者，我習慣先看看引擎有哪些屬性。文檔説可以通過 rendering.sky 來設置天空！

我的發現：mapvthree 提供了三種類型的天空：

DefaultSky：默認天空，風格化效果
DynamicSky：動態天空，根據時間變化
StaticSky：靜態天空，預置天氣狀態

我的理解：不同類型的天空適合不同的場景，可以根據需求選擇！

第二步：使用默認天空（DefaultSky）

默認天空適合風格化的天空效果，從下到上只有顏色的漸變，沒有太陽、雲層等元素。

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 80,
    },
    rendering: {
        sky: new mapvthree.DefaultSky(),
        enableAnimationLoop: true,
    },
});

我的發現：默認天空很簡單，只有顏色漸變，適合不需要複雜效果的場景！

我的理解：

優點：性能好，配置簡單
缺點：沒有太陽、雲層等元素
適用場景：風格化場景、性能要求高的場景

第三步：使用動態天空（DynamicSky）

動態天空根據時間有不同的光照效果，可以模擬日出日落、日夜交替等自然光照變化。

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 80,
    },
    rendering: {
        sky: new mapvthree.DynamicSky(),
        enableAnimationLoop: true,
    },
    clock: {
        currentTime: new Date('2025-05-15 14:00:00'),
        tickMode: 2, // TICK_LOOP
    },
});

我的發現：動態天空會根據時間自動變化，從日出到正午，再到黃昏，最後到夜晚！

我的理解：

優點：真實感強，有大氣散射、體積雲等高級特效
缺點：性能開銷較大
適用場景：需要真實場景展示、需要晝夜交替效果

第四步：使用靜態天空（StaticSky）

靜態天空預置了常見的天氣狀態和時段狀態，可以直接切換。

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 80,
    },
    rendering: {
        sky: new mapvthree.StaticSky(),
        enableAnimationLoop: true,
    },
});

我的發現：靜態天空有預置的天氣狀態，可以直接切換，不需要手動配置！

我的理解：

優點：配置簡單，有預置效果
缺點：不能動態變化
適用場景：需要固定天氣狀態的場景

第五步：添加天氣效果

看到天空後，我想：能不能添加天氣效果？

文檔説可以用 DynamicWeather 來模擬雨、雪、霧等天氣效果！

import * as mapvthree from '@baidumap/mapv-three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 80,
    },
    rendering: {
        sky: null, // 先不設置，稍後添加
        enableAnimationLoop: true,
    },
});

// 添加動態天空
const sky = engine.add(new mapvthree.DynamicSky());

// 添加天氣效果（需要配合 DynamicSky 使用）
const weather = engine.add(new mapvthree.DynamicWeather(sky));
weather.weather = 'rainy'; // 設置為雨天

我的發現：天氣效果需要配合 DynamicSky 使用，不能單獨使用！

我的理解：DynamicWeather 需要傳入 DynamicSky 實例，這樣才能正確顯示天氣效果。

天氣類型

文檔説支持多種天氣類型：

weather.weather = 'clear';        // 晴天
weather.weather = 'partlyCloudy'; // 部分多雲
weather.weather = 'cloudy';       // 多雲
weather.weather = 'overcast';    // 陰天
weather.weather = 'foggy';       // 霧天
weather.weather = 'rainy';       // 雨天
weather.weather = 'snowy';       // 雪天

我的嘗試：

// 切換不同天氣
weather.weather = 'rainy';  // 下雨
weather.weather = 'snowy';  // 下雪
weather.weather = 'foggy';  // 起霧

我的發現：可以動態切換天氣，效果很真實！

第六步：如何選擇合適的天空氣候

看到這麼多天空類型後，我想：應該怎麼選擇？

場景 1：風格化場景

如果做風格化的場景，用 DefaultSky：

rendering: {
    sky: new mapvthree.DefaultSky(),
}

我的想法：風格化場景不需要真實的光照，用默認天空就夠了！

場景 2：真實場景展示

如果做真實場景展示，用 DynamicSky：

rendering: {
    sky: new mapvthree.DynamicSky(),
},
clock: {
    currentTime: new Date('2025-05-15 14:00:00'),
    tickMode: 2, // TICK_LOOP
},

我的想法：真實場景需要真實的光照和晝夜交替，用動態天空！

場景 3：固定天氣狀態

如果需要固定的天氣狀態，用 StaticSky：

rendering: {
    sky: new mapvthree.StaticSky(),
}

我的想法：固定天氣狀態不需要動態變化，用靜態天空！

場景 4：需要天氣效果

如果需要天氣效果，用 DynamicSky + DynamicWeather：

const sky = engine.add(new mapvthree.DynamicSky());
const weather = engine.add(new mapvthree.DynamicWeather(sky));
weather.weather = 'rainy';

我的想法：天氣效果必須配合動態天空使用！

第七步：完整示例

我想寫一個完整的示例，展示天空和天氣的使用：

import * as mapvthree from '@baidumap/mapv-three';
import {Mesh, SphereGeometry, MeshStandardMaterial} from 'three';

const container = document.getElementById('container');

const engine = new mapvthree.Engine(container, {
    map: {
        center: [116.404, 39.915],
        range: 1000,
        pitch: 80,
    },
    rendering: {
        sky: null, // 稍後添加
        enableAnimationLoop: true,
    },
    clock: {
        currentTime: new Date('2025-05-15 14:00:00'),
        tickMode: 2, // TICK_LOOP
    },
});

// 添加動態天空
const sky = engine.add(new mapvthree.DynamicSky());

// 添加天氣效果
const weather = engine.add(new mapvthree.DynamicWeather(sky));
weather.weather = 'rainy';

// 添加一個測試物體
const sphere = new Mesh(
    new SphereGeometry(100, 32, 32),
    new MeshStandardMaterial({
        color: 0xffff00,
        metalness: 0.8,
        roughness: 0.2,
    })
);
const position = engine.map.projectArrayCoordinate([116.404, 39.915]);
sphere.position.set(position[0], position[1], position[2]);
engine.add(sphere);

我的感受：寫一個完整的示例，把學到的都用上，感覺很有成就感！

第八步：踩過的坑

作為一個初學者，我踩了不少坑，記錄下來避免再犯：

坑 1：動態天空沒有效果

原因：沒有開啓循環渲染。

解決：確保開啓了 enableAnimationLoop: true。

坑 2：天氣效果不顯示

原因：天氣效果沒有配合 DynamicSky 使用。

解決：天氣效果必須配合 DynamicSky 使用，不能單獨使用。

坑 3：天空沒有動畫效果

原因：沒有開啓循環渲染，或者沒有設置時鐘。

解決：

開啓 enableAnimationLoop: true
設置 clock.tickMode 讓時間自動流逝

坑 4：天氣切換不生效

原因：天氣對象沒有正確創建，或者沒有傳入 DynamicSky 實例。

解決：確保 DynamicWeather 傳入了 DynamicSky 實例。

我的學習總結

經過這一天的學習，我掌握了：

天空系統的作用：提供場景的背景和光照，營造氛圍感
三種天空類型：
- DefaultSky：風格化效果，性能好
- DynamicSky：真實場景，有晝夜交替
- StaticSky：預置天氣狀態
天氣效果：通過 DynamicWeather 模擬雨、雪、霧等天氣
如何選擇：根據場景需求選擇合適的天空類型
注意事項：動態天空不能用於 BMapGL，天氣效果必須配合動態天空使用

我的感受：天空和天氣系統真的很強大！雖然功能很多，但是用起來其實不難。關鍵是要理解每種天空的特點，然後根據需求選擇合適的類型！

下一步計劃：

學習更多天空的配置選項
嘗試創建複雜的天氣效果
做一個完整的環境展示項目

學習筆記就到這裏啦！作為一個初學者，我覺得天空和天氣系統雖然功能很多，但是用起來其實不難。關鍵是要理解每種天空的特點，然後根據需求選擇合適的類型！希望我的筆記能幫到其他初學者！大家一起加油！

星星上的絲瓜博客

星星上的絲瓜博客

博客 / 詳情