Three.js如何实现雾化效果示例代码


Posted in Javascript onSeptember 27, 2017

前言

本文主要给大家介绍了关于Three.js实现雾化效果的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

实现方法

如果使用three.js实现雾化效果很简单,只需要在给场景scene对象的fog属性添加值就好了,比如:

scene.fog = new THREE.Fog(0xffffff,100,120);

这样就给场景添加了雾化的效果,在实例化雾化的对象的时候,需要传三个值(雾的颜色,雾化开始的距离相机的位置,全雾化距离相机的位置)。

Three.js如何实现雾化效果示例代码

添加上了就会显示以上的效果,设置雾化的过程比较短,所以雾化的效果比较明显。

还有一个种是随着距离呈指数增长的雾化效果,只需要设置雾的颜色和浓度即可。如:

scene.fog = new THREE.FogExp2(0xffffff,0.02);

效果如下:

Three.js如何实现雾化效果示例代码

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
浅谈Angular4中常用管道
Sep 27 #Javascript
深入理解Vue.js源码之事件机制
Sep 27 #Javascript
js截取字符串功能的实现方法
Sep 27 #Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 #Javascript
Three.js基础学习之场景对象
Sep 27 #Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 #Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Django中的ajax请求
2018/10/19 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
职工趣味运动会方案
2014/02/10 职场文书
运动会入场词200字
2014/02/15 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
广播节目策划方案
2014/05/23 职场文书
员工安全责任书范本
2014/07/24 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
环保守法证明
2015/06/24 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android