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 相关文章推荐
jQuery获取和设置表单元素的方法
Feb 14 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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计算上一个月的今天
2013/05/23 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python字节单位转换实例
2019/12/05 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
Python pip 常用命令汇总
2020/10/19 Python
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
标记环介质访问控制协议
2016/03/27 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
上海世博会口号
2014/06/19 职场文书
中学清明节活动总结
2014/07/04 职场文书
试用期辞职信范文
2015/03/02 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
php png失真的原因及解决办法
2021/11/17 PHP