1. Fog 組件簡(jiǎn)介

Fog（霧）用于在 Three.js 場(chǎng)景中創(chuàng)建大氣效果，模擬遠(yuǎn)處物體在霧中的模糊感。它可以增強(qiáng)景深，提高場(chǎng)景的真實(shí)感，并優(yōu)化性能（遠(yuǎn)處物體可被霧隱藏，減少渲染壓力）。

Three.js 提供了 兩種霧效：

• THREE.Fog - 線性霧，隨距離均勻加深。
• THREE.FogExp2 - 指數(shù)霧，隨距離指數(shù)增長(zhǎng)，更自然。

2. 線性霧（THREE.Fog）

2.1 語法

const fog = new THREE.Fog(color, near, far);
scene.fog = fog;

• color：霧的顏色（例如 0xaaaaaa）。
• near：開始出現(xiàn)霧的距離（從攝像機(jī)開始計(jì)算）。
• far：霧達(dá)到完全覆蓋的距離（超出此距離的物體完全被霧遮擋）。

2.2 示例

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xaaaaaa, 5, 20);

• 5 以內(nèi)無霧，5-20 之間物體逐漸被霧覆蓋，20 以外完全被霧遮擋。

2.3 線性霧特點(diǎn)

? 適合大場(chǎng)景（如森林、城市、山脈）。
? 可控性高（可以精確設(shè)定霧的范圍）。
? 較生硬（霧的變化是線性的，可能不夠真實(shí)）。

3. 指數(shù)霧（THREE.FogExp2）

3.1 語法

const fogExp2 = new THREE.FogExp2(color, density);
scene.fog = fogExp2;

• color：霧的顏色。
• density：霧的濃度（數(shù)值越大，霧越濃）。

3.2 示例

scene.fog = new THREE.FogExp2(0xaaaaaa, 0.05);

• density = 0.05：隨著距離增加，物體逐漸被霧覆蓋，越遠(yuǎn)霧越濃。

3.3 指數(shù)霧特點(diǎn)

? 更真實(shí)（霧的濃度隨距離指數(shù)增加）。
? 適合小型場(chǎng)景（如煙霧、塵霧、室內(nèi)霾）。
? 難以控制（沒有 near 和 far，只能調(diào)整 density）。

4. Fog 與材質(zhì)

• 霧的顏色會(huì)影響受霧影響的物體。
• 大多數(shù)材質(zhì)支持霧（如 MeshStandardMaterial）。
• 特殊材質(zhì)不受霧影響：

• • MeshBasicMaterial（基礎(chǔ)材質(zhì)，不受燈光和霧影響）
  • ShaderMaterial（自定義著色器時(shí)需手動(dòng)實(shí)現(xiàn)霧效）

4.1 開啟霧影響

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, fog: true });

4.2 禁用霧影響

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, fog: false });

fog: false 時(shí)，該物體不會(huì)被霧影響。

5. 動(dòng)態(tài)調(diào)整霧

可以使用 dat.GUI 控制霧的參數(shù)：

const gui = new dat.GUI();
const fog = new THREE.Fog(0xaaaaaa, 5, 20);
scene.fog = fog;

gui.addColor(fog, 'color');
gui.add(fog, 'near', 1, 50);
gui.add(fog, 'far', 1, 100);

這樣可以在運(yùn)行時(shí)實(shí)時(shí)調(diào)整霧的顏色和范圍。

6. 結(jié)合天空（Sky）和霧

如果場(chǎng)景有 Sky 組件，霧的顏色應(yīng)匹配天空顏色：

scene.fog = new THREE.Fog(0x87CEEB, 10, 50); // 顏色接近天空

這樣可以讓霧和天空融合，減少突兀感。

7. 結(jié)合燈光和陰影

• 方向光（DirectionalLight）：霧會(huì)影響遠(yuǎn)處光照，遠(yuǎn)處物體更暗。
• 點(diǎn)光源（PointLight）/聚光燈（SpotLight）：燈光在霧中會(huì)形成光束效果（如霧燈）。
• 陰影：如果霧太濃，陰影可能會(huì)變得不明顯。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

在霧中添加燈光，可以制造神秘的光束效果。

8. 結(jié)合后處理（PostProcessing）

后處理可以增強(qiáng)霧效果，如體積光、景深（DOF）：

• 使用 UnrealBloomPass 增強(qiáng)霧中的光照：

const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, 0.4, 0.85);
composer.addPass(bloomPass);

• 使用 BokehPass 增強(qiáng)遠(yuǎn)處的虛化效果：

const bokehPass = new BokehPass(scene, camera, {
    focus: 10.0,
    aperture: 0.025,
    maxblur: 0.01
});
composer.addPass(bokehPass);

結(jié)合后處理，可以讓霧更加真實(shí)，增強(qiáng)沉浸感。

9. 可能遇到的問題

9.1 霧沒有效果

• 檢查是否已賦值給 scene.fog：

console.log(scene.fog);

• 確保使用支持霧的材質(zhì)：

console.log(material.fog);  // true 才會(huì)受霧影響

9.2 霧影響過強(qiáng)/過弱

• 線性霧：調(diào)整 near 和 far 之間的比例。
• 指數(shù)霧：調(diào)整 density 以適應(yīng)場(chǎng)景大小。

10. 總結(jié)

最佳實(shí)踐

• 遠(yuǎn)景霧：FogExp2 更真實(shí)，適合小范圍霧霾。
• 大氣效果：Fog 適合模擬遠(yuǎn)景霧，如大霧天氣。
• 結(jié)合后處理：配合 BokehPass、UnrealBloomPass 讓霧更自然。

到此這篇關(guān)于Three.js開發(fā)之Fog組件知識(shí)整理的文章就介紹到這了,更多相關(guān)Three.js Fog組件知識(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論