一個神庫！在 Vue3 中實現 "大氣散射" 特效！
哈嘍，大家好！今天我得給大家分享一個超厲害的技巧，在 Vue3 里實現超炫的大氣層渲染、大氣散射特效！
這效果一出來，直接讓咱們的 3D 場景逼格滿滿，就跟打開了新世界的大門一樣。
先給大家介紹個神器——@takram/three-atmosphere。
這玩意兒是個專門搞大氣散射效果的庫，簡單來說，就是能把天空那種光影變化、太陽月亮的光照方向都模擬出來，讓咱們的 3D 場景看起來就跟真的一樣。
探秘 @takram/three-atmosphere
@takram/three-atmosphere 是基于 Three.js 與 R3F（React Three Fiber）精心打造的預計算大氣散射實現庫，它源于 Eric Bruneton 的深厚理論，專為 Web GIS 引擎渲染原型而生。
其本質是模擬大氣對光線的散射，涵蓋了太陽和月亮的光照方向、天空顏色漸變以及云層等自然現象，讓 3D 場景得以沉浸在逼真的天空之下。
主要特性
- 預計算大氣散射 ：可模擬大氣的光照和散射效果，適用于大規模場景的天空渲染和光影效果模擬。
- 支持多種光照模式 ：提供延遲光照和前向光照兩種模式。延遲光照適合大規模場景，但僅支持 Lambertian BRDF；前向光照與 Three.js 內置材質和陰影兼容，但更適合小規模場景。
- 豐富的組件和功能 ：包含 Atmosphere、Sky、Stars、SkyLight、SunLight、AerialPerspective 等 R3F 組件，以及 AtmosphereMaterialBase、SkyMaterial、StarsMaterial、SkyLightProbe、SunDirectionalLight、AerialPerspectiveEffect 等 Three.js 材質和效果類。
接下來，咱們看看在 Vue3 里怎么用這個神器。
安裝
第一步，得先把庫裝上。在項目里打開終端，敲上
npm install @takram/three-atmosphere three postprocessing`把 @takram/three-atmosphere、three 和 postprocessing 這幾個庫都裝好。
創建 Vue 組件
接著，新建個 Vue 組件，比如叫 AtmosphereDemo.vue。
搭建基本結構
先寫個最簡單的模板，給咱們的 3D 場景留個位置。
<template>
<div ref="containerRef" class="container"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const containerRef = ref(null)
onMounted(() => {
// 后面的代碼都放這兒
})
</script>
<style scoped>
.container {
width: 100%;
height: 100vh;
}
</style>初始化場景、相機和渲染器
在 onMounted 里，先用 Three.js 的基本元素把一個簡單的 3D 空間搭起來。
const container = containerRef.value
const width = container.clientWidth
const height = container.clientHeight
// 創建場景
const scene = new THREE.Scene()
// 創建相機
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 10
// 創建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
container.appendChild(renderer.domElement)這就相當于給咱們的 3D 場景搭建好了 “舞臺”，有了展示的空間。
加載預計算紋理
然后，用 PrecomputedTexturesLoader 把預計算紋理加載進來，這玩意兒可是讓場景真實的關鍵。這紋理文件就像是給天空加上真實光影的貼圖。
import { PrecomputedTexturesLoader } from '@takram/three-atmosphere'
const precomputedTexturesLoader = new PrecomputedTexturesLoader()
precomputedTexturesLoader.load(
'/assets', // 紋理目錄路徑，需根據實際項目結構設置
(progress) => {
console.log('Loading:', progress)
}
)創建大氣層效果
接下來，把 Atmosphere 實例化，開啟大氣效果，這就相當于把整個天空的光影變化效果給啟動起來。
import { Atmosphere } from '@takram/three-atmosphere/three'
const atmosphere = new Atmosphere()
atmosphere.date = new Date()
添加天空組件
再把 Sky、SkyLight、SunLight 這些組件加進去，分別模擬天空、天空光照和太陽光照。這就讓咱們的場景有了天空的顏色和光照。
import { Sky, SkyLight, SunLight } from'@takram/three-atmosphere/three'
// 添加天空
const sky = new Sky()
sky.frustumCulled = false
scene.add(sky)
// 添加天空光照
const skyLight = new SkyLight()
skyLight.position.set(0, 0, 0)
scene.add(skyLight)
// 添加太陽光照
const sunLight = new SunLight()
sunLight.target.position.set(0, 0, 0)
scene.add(sunLight)
scene.add(sunLight.target)創建渲染通道
最后，搞個渲染通道，用 EffectComposer 把 AerialPerspectiveEffect 和 ToneMappingEffect 都加上，這倆組合起來，畫面效果直接拉滿。
import { AerialPerspectiveEffect } from'@takram/three-atmosphere/three'
const aerialPerspective = new AerialPerspectiveEffect(camera)
const composer = new THREE.EffectComposer(renderer, {
frameBufferType: THREE.HalfFloatType
})
composer.addPass(new THREE.RenderPass(scene, camera))
composer.addPass(
new THREE.EffectPass(
camera,
aerialPerspective,
new THREE.ToneMappingEffect({ mode: THREE.AGXMode })
)
)設置窗口大小調整和動畫循環
為了讓畫面能隨著窗口大小調整，并且能動態更新，再加上窗口大小調整事件監聽和動畫循環。
// 窗口大小調整事件監聽
window.addEventListener('resize', () => {
camera.aspect = container.clientWidth / container.clientHeight
camera.updateProjectionMatrix()
renderer.setSize(container.clientWidth, container.clientHeight)
})
// 動畫循環
function animate() {
requestAnimationFrame(animate)
const date = newDate()
atmosphere.updateByDate(date)
renderer.render(scene, camera)
}
animate()功能與限制
最后，給大家講講這玩意兒的功能和限制。它的功能很強大，能渲染天空、星星，計算天空和太陽的光照效果，還能通過日期更新太陽和月亮的方向。
不過呢，它也有點小限制，比如參考系固定為 ECEF 且不可配置，視角僅支持在大氣內層球體上方，大氣透視的 inscatter 項存在地平線偽影問題，未實現體積光束效果，主要針對地球大氣設計，對于其他行星的渲染有限制，目前基于 GLSL 實現，尚未支持 node-based TSL 和 WebGPU。
總之，這個 @takram/three-atmosphere 真的是個超棒的工具，有了它，在 Vue3 里實現超炫的大氣層渲染特效就不再是夢啦！大家趕緊試試吧，肯定能讓你的項目靚到起飛！
- 更多參考案例：https://takram-design-engineering.github.io/three-geospatial/?path=/story/atmosphere-minimal-setup--minimal-setup
- Github 地址：https://github.com/takram-design-engineering/three-geospatial
