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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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数据库开发知多少
2006/10/09 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php 中英文语言转换类代码
2011/08/11 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
Vue中使用vux配置代码详解
2018/09/16 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python梯度下降法的简单示例
2018/08/31 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python如何实现单链表的反转
2020/02/10 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python集合的新增元素方法整理
2020/12/07 Python
运动会演讲稿200字
2014/08/25 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
股东协议书范本2016
2016/03/21 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang