雾化效果

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

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

先来看一下效果图

css3实效雾效果

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

HTML代码

css代码

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

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);
     }