霧化效果是3D的比較常見(jiàn)的特性蔬咬，在游戲中見(jiàn)到的煙霧拘央、爆炸火焰以及白云等效果都是霧化的結(jié)果疚俱，下面這篇文章主要給大家介紹了如何實(shí)現(xiàn)霧化效果的相關(guān)資料式塌，需要的朋友可以參考借鑒武通，下面來(lái)一起看看吧。
一珊搀、css3實(shí)現(xiàn)平面霧浮動(dòng)效果
先來(lái)看一下效果圖
css3實(shí)效霧效果
實(shí)現(xiàn)方法
使用兩張透明的霧化效果圖片冶忱，添加上css3動(dòng)畫，就可以制作出霧浮動(dòng)效果啦~
實(shí)現(xiàn)代碼
HTML代碼
<template>
<div class="fog-css3">
<div class="fog__container">
<div class="fog__img fog__img--first"></div>
<div class="fog__img fog__img--second"></div>
</div>
</div>
</template>
css代碼
<style lang="scss" scoped>
.fog-css3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
pointer-events: none;
.fog {
position: relative;
height: vh(100);
width: 100%;
background-color: #000;
}
.fog__container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.fog__img {
position: absolute;
height: 100vh;
width: 300vw;
}
.fog__img--first {
background: url("../../../assets/img/fog-1.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: marquee 60s linear infinite;
animation: marquee 60s linear infinite;
}
.fog__img--second {
background: url("../../../assets/img/fog-2.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: marquee 40s linear infinite;
animation: marquee 40s linear infinite;
}
@-webkit-keyframes marquee {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
@keyframes marquee {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
}
</style>
霧化圖片資源（過(guò)于透明，可能看不清楚）
fog-1.png
fog-2.png
二囚枪、ThingJs實(shí)現(xiàn)霧化效果
先來(lái)看一下效果圖
image.png
實(shí)現(xiàn)方法
給場(chǎng)景添加霧化效果派诬，需要傳入三個(gè)參數(shù)（霧顏色，近距離霧效濃度链沼，遠(yuǎn)距離霧效濃度）
實(shí)現(xiàn)代碼
js代碼
// thingjs添加霧化效果
fogThingJs() {
/**
* @name: thingjs霧化效果
* @param {參數(shù)1：霧的顏色,參數(shù)2：近距離的霧效濃度,參數(shù)3：遠(yuǎn)距離的霧效濃度}
*/
app.fog = {
color: 0xffffff, // 顏色
near: 100, // 近距離的霧效濃度
far: 200, // 遠(yuǎn)距離的霧效濃度
};
}
// thingJs清除霧效果
removeFog() {
app.fog = null;
}
三默赂、Three.js實(shí)現(xiàn)霧效果
先來(lái)看一下效果圖
image.png
實(shí)現(xiàn)方法
給場(chǎng)景添加霧化效果，需要傳入三個(gè)參數(shù)（霧的顏色括勺，霧化開(kāi)始的距離相機(jī)的位置缆八，全霧化距離相機(jī)的位置）
實(shí)現(xiàn)代碼
一、線性霧：霧的密度是隨著距離線性增大的
// THREE.js霧化效果
fogThreeOne() {
/**
* @name: 霧化效果
* @param {參數(shù)1：霧的顏色,參數(shù)2：霧化開(kāi)始距離相機(jī)的位置,參數(shù)3：全霧化距離相機(jī)的位置}
*/
app.fog = new THREE.Fog(0x676767, 10, 120);
}
二疾捍、指數(shù)霧：霧的密度是隨著距離指數(shù)增大的
// 隨著距離呈指數(shù)增長(zhǎng)的霧化效果奈辰，只需要設(shè)置霧的顏色和濃度即可
fogThreeTwo() {
/**
* @name: 隨著距離呈指數(shù)增長(zhǎng)的霧化效果
* @param {參數(shù)1：霧的顏色,參數(shù)2：霧濃度}
*/
app.fog = new THREE.FogExp2(0xffffff, 0.05);
}
