没有合适的资源?快使用搜索试试~ 我知道了~
puxiao#threejs-tutorial#14 Three.js基础之雾1
需积分: 0 0 下载量 86 浏览量
2022-07-25
14:35:34
上传
评论
收藏 7KB MD 举报
温馨提示
试读
雾的特点:越靠近镜头 雾气越小越远离镜头 雾气越大雾气本身只会影响物体的渲染效果,但雾气本身并不会流动默认所有材质都可以被雾影响,若某物体不想被雾影响,可以将该
资源推荐
资源详情
资源评论
# 14 Three.js基础之雾
## 雾(Fog)概述
这里的 雾(Fog) 就是指我们日常生活中的雾气。
我们之前所有的示例的 scene 中,都是完全清晰、透明的空间,如果想创建出有雾气的场景,就需要 雾 了。
#### 雾的特点:
1. 越靠近镜头 雾气越小
2. 越远离镜头 雾气越大
3. 雾气本身只会影响物体的渲染效果,但雾气本身并不会流动
4. 默认所有材质都可以被雾影响,若某物体不想被雾影响,可以将该物体材质的 fog 属性设置为 false
#### 雾的 2 种类型
在 Three.js 中,一共有 2 种 雾的类型;
| 雾的类型 | 名称 | 解释 |
| -------- | ------ | ------------------------- |
| Fog | 雾 | 雾的密度随着距离 线性增大 |
| FogExp2 | 指数雾 | 雾的密度随着距离 指数增大 |
#### Fog构造参数
```
Fog( color : Integer, near : Float, far : Float )
```
1. color:雾的颜色
2. near:开始应用雾的最小距离,默认值为 1
> 假设 雾的 near 数值 小于 镜头 near 的值,则该区域的物体不会被雾所影响。
>
> 因为小于镜头 near 区域的物体根本就不可见,Three.js 也不会渲染该区域。
3. far:应用雾的最大距离,默认值为 1000
> 假设 雾的 far 数值 大于 镜头 far 的值,则该区域的物体不会被雾所影响。
#### FogExp2构造参数
```
FogExp2( color : Integer, density : Float )
```
1. color:雾的颜色
2. density:定义雾的密度将会增加的有多快,默认值为 0.00025
#### 如何把雾添加到场景中?
添加的方式非常简单:
```
scene.fog = new Three.Fog(0xFFFFFF,10,100)
或
scene.fog = new Three.FogExp2(0xFFFFFF,0.001)
```
#### 究竟该选择哪种雾?
从实际渲染效果 真实度 而言,FogExp2 更加逼真。
但实际项目中,往往更多选择 Fog,因为 Fog 更加简单。
> Fog 还允许你调整 near 和 far 的值,而 FogExp2 只允许调整指数值,若想对雾气距离更加精准控制,Fog 是第一选择。
点击阅读更多
资源评论
简甜XIU09161027
- 粉丝: 26
- 资源: 310
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功