Three.js进阶之混合与雾
一、混合
在Three.js中实现混合效果的关键就是选择合适的混合方程和设置合适的混合因子，其混合议程信息如下所示：
常量名称中Src代表的是各通道值来自源片元，Dst代表各通道值来自目标片元。另外，THREE.SrcAlphaSaturateFactor只能用作源因子。
二、混合示例
关键代码如下：
1 var blendEquation=["AddEquation", "SubtractEquation",2 "ReverseSubtractEquation", "MinEquation", "MaxEquation"]; //混合方程3 var src = [ "ZeroFactor", "OneFactor", "SrcColorFactor",4 "OneMinusSrcColorFactor", "SrcAlphaFactor", "OneMinusSrcAlphaFactor",5 "DstAlphaFactor", "OneMinusDstAlphaFactor", "DstColorFactor",6 "OneMinusDstColorFactor", "SrcAlphaSaturateFactor" ]; //源因子7 var dst = [ "ZeroFactor", "OneFactor", "SrcColorFactor",8 "OneMinusSrcColorFactor", "SrcAlphaFactor", "OneMinusSrcAlphaFactor",9 "DstAlphaFactor", "OneMinusDstAlphaFactor", "DstColorFactor",10 "OneMinusDstColorFactor" ]; //目标因子11 var blending = "CustomBlending"; //混合方式12 function addMesh(){ //向场景中添加物体13 var texture1 = new THREE.TextureLoader().load( "img/lgq.png");//加载滤光镜纹理14 material = new THREE.MeshLambertMaterial( { //创建材质15 map:texture1, //设置纹理16 transparent: true, //开启透明17 blending:THREE[blending], //设置混合方式18 blendSrc:THREE[src[4]], //设置源因子19 blendDst:THREE[dst[5]], //设置目标因子20 blendEquation: THREE.AddEquation, //设置混合方程21 side:THREE.DoubleSide //设置纹理两面可见22 });23 var geometry = new THREE.PlaneGeometry(10,10); //创建矩形24 mesh = new THREE.Mesh(geometry, material); //创建滤光镜网格对象25 mesh.position.y=10; //物体的y位置26 mesh.position.z=20; //物体的z位置27 scene.add(mesh); //向场景中添加滤光镜28 ......//此处省略向场景中添加其他物体的代码，读者可自行查看随书源代码29 }30 function addGui() { //添加GUI控制31 var gui=new dat.GUI({width:300}); //新建GUI控制面板变量32 gui.open(); //打开控制面板33 var myTitle=gui.addFolder(’混合设置’); //新建选项34 var controls = new function (e) {35 this.srcType = src[4] //设置源因子属性36 this.dstType = dst[5] //设置目标因子属性37 this.blendEquation=blendEquation[0] //设置混合方程38 };39 var srcType=myTitle.add(controls, 'srcType', src); //添加源因子选项40 var dstType=myTitle.add(controls, 'dstType', dst); //添加目标因子选项41 var blendEquationType=myTitle.add(controls, 'blendEquation',blendEquation); //添加混合方程选项42 blendEquationType.onChange(function (e) { //混合方程改变监听43 material.blendEquation=THREE[e] //设置材质的混合方程44 });45 srcType.onChange(function (e) { //源因子改变监听46 material.blendSrc=THREE[e]; //设置材质的混合源因子47 })48 dstType.onChange(function (e) { //目标因子改变监听49 material.blendDst=THREE[e]; //设置材质的混合目标因子50 })} ❑ 第1～11行主要为声明程序所需的混合方式数组、混合方程数组、源因子数组、目标因子数组。混合方程数组包含所有Three.js引擎提供的所有混合方程，源因子数组和目标因子数组包含Three.js引擎提供的混合因子。
❑ 第12～29行为创建滤光镜网格对象，设置材质的混合相关属性和将滤光镜添加到场景中。实现混合效果的关键在于合理设置材质的transparent、blending、blendSrc、blendDst、blendEquation属性，恰当组合可以产生很好的效果。
❑ 第30～50行为添加GUI控制面板。首先新建GUI控制面板变量和添加混合设置选项，然后在混合设置选项下，添加源因子、目标因子和混合方程选项并对应添加选项改变监听。当选项改变时，更新材质对应的属性。
三、雾
Three.js引擎中雾的类型和描述，如下所示：
fog: 线性雾，随着距离的增大而线性增大
FogExp2:： 指数雾，随着距离的增大而呈指数 密集增长
使用示例代码：
1 function fogSelect(type){ //选择雾的类型2 if(type.fog){ //如果选择线性雾3 scene.fog = new THREE.Fog(0x00cccc,50,120); //将场景中的雾指定为线性雾4 }5 if(type.fogExp2){ //如果选择指数雾6 scene.fog = new THREE.FogExp2(0x00cccc,0.007); //将场景中的雾指定为指数雾7 }8 }
上面的代码是根据选择的雾类型的不同，来指定场景中的雾的。创建线性雾方法时第一个参数为颜色值，颜色采取十六进制，后两个参数是雾化效果近处属性值和远处属性值，这两个参数确定了雾的起始位置以及浓度的加深程度。创建指数雾时第一个参数为颜色值，第二个参数为雾的浓密程度。