雾化效果

雾化效果是3D的比较常见的特性，在游戏中见到的烟雾、爆炸火焰以及白云等效果都是雾化的结果，下面这篇文章主要给大家介绍了如何实现雾化效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。

一、css3实现平面雾浮动效果

先来看一下效果图

css3实效雾效果

实现方法
使用两张透明的雾化效果图片，添加上css3动画，就可以制作出雾浮动效果啦~
实现代码

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>

雾化图片资源（过于透明，可能看不清楚）

fog-1.png fog-2.png

二、ThingJs实现雾化效果

先来看一下效果图

image.png

实现方法
给场景添加雾化效果，需要传入三个参数（雾颜色，近距离雾效浓度，远距离雾效浓度）

实现代码

js代码
    // thingjs添加雾化效果
    fogThingJs() {
        /**
         * @name: thingjs雾化效果
         * @param {参数1：雾的颜色,参数2：近距离的雾效浓度,参数3：远距离的雾效浓度}
         */
        app.fog = {
            color: 0xffffff, // 颜色
            near: 100, // 近距离的雾效浓度
            far: 200, // 远距离的雾效浓度
        };
    }

    // thingJs清除雾效果
    removeFog() {
          app.fog = null;
    }

三、Three.js实现雾效果

先来看一下效果图

image.png

实现方法
给场景添加雾化效果，需要传入三个参数（雾的颜色，雾化开始的距离相机的位置，全雾化距离相机的位置）

实现代码
一、线性雾：雾的密度是随着距离线性增大的

    // THREE.js雾化效果
    fogThreeOne() {
        /**
         * @name: 雾化效果
         * @param {参数1：雾的颜色,参数2：雾化开始距离相机的位置,参数3：全雾化距离相机的位置}
         */
        app.fog = new THREE.Fog(0x676767, 10, 120);
    }

二、指数雾：雾的密度是随着距离指数增大的

   // 随着距离呈指数增长的雾化效果，只需要设置雾的颜色和浓度即可
    fogThreeTwo() {
         /**
           * @name: 随着距离呈指数增长的雾化效果
           * @param {参数1：雾的颜色,参数2：雾浓度}
          */
          app.fog = new THREE.FogExp2(0xffffff, 0.05);
     }