WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js雾化效果FogFogExp2

视频讲解参考课程《实战开发常用技能》课时第57小节

开发Web3D应用有时候需要实现一个雾化的效果,简单说就是场景中越远的位置看起来越模糊,Three.js引擎提供了两个雾Fog和指数雾FogExp2两个类。

Three.js场景对象Scene具有一个雾化属性.fog,该属性的属性值是雾对象Fog或指数雾对象FogExp2。如果你想模拟一个雾化效果只需要在threejs代码中设置场景对象的.fog属性就可以。

通过构造函数Fog的参数1设置周围环境雾的颜色,参数2和参数3用来设置雾化影响的范围,在参数2和参数3距离范围的物体雾化效果受环境中的雾Fog影响,范围外的物体不受影响。

构造函数Fog参数一0xcc0000表示场景中雾的颜色,具体雾的颜色你可以根据具体环境设置

构造函数Fog参数二表示受雾化影响的最近距离(以相机位置为准)

构造函数Fog参数三1000表示受雾化影响的最远距离(以相机位置为准)

注意构造函数Fog参数三1000设置,太大或太小都看不出明显的逐渐递变雾化效果

var scene = new THREE.Scene();
//设置场景对象Scene的雾化属性.fog来模拟生活中雾化效果
scene.fog = new THREE.Fog(0xcc0000, 1, 1000);

Fog

Fog类定义的是线性雾,雾的密度是随着距离线性增大的,即场景中物体雾化效果随着随距离线性变化。

构造函数雾Fog(color,near,far)的三个参数分别对应雾对象Fog的三个属性.color.near.far

.color属性表示雾的颜色,比如设置为红色,场景中远处物体为黑色,场景中最近处距离物体是自身颜色,最远和最近之间的物体颜色是物体本身颜色和雾颜色的混合效果。

// 改变雾的颜色为白色
scene.fog.color.set(0xffffff)

.near属性值表示应用雾化效果的最小距离,距离活动摄像机长度小于.near的物体将不会被雾所影响

.far属性值表示应用雾化效果的最大距离,距离活动摄像机长度大于.far的物体将不会被雾所影响

指数雾FogExp2

// 指数雾(FogExp2)
// 参数2:0.001默认值是0.00025,改变的是属性.density
scene.fog = new THREE.FogExp2(0xcc0000,0.001);

FogExp2类定义的是指数雾。也就是说,雾的密度是随着距离指数增大的。

FogExp2Fog的雾化算法不同,都具有颜色属性.colorFogExp2没有.near.far属性,直接设置.density属性就可以

构造函数格式FogExp2( color, density),参数1表示雾的颜色,参数2表示雾的密度将会增长多快

.density表示雾的颜色,参数2表示雾的密度将会增长多快,默认值是0.00025。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号