Three.js 雾化效果 Fog 和 FogExp2

发布于 07-16 21:39 字数 1919 浏览 1601 评论 0

开发 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。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

0 文章
0 评论
24515 人气
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文