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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
用javascript获取地址栏参数
Dec 22 Javascript
javascript 学习之旅 (1)
Feb 05 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
vue.js实例todoList项目
Jul 07 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 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/12/13 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python实现的检测网站挂马程序
2014/11/30 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python中的colorlog库使用详解
2019/07/05 Python
使用python画社交网络图实例代码
2019/07/10 Python
python障碍式期权定价公式
2019/07/19 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
python 通过exifread读取照片信息
2020/12/24 Python
python 数据类型强制转换的总结
2021/01/25 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
劲霸男装广告词
2014/03/21 职场文书
关爱老人标语
2014/06/21 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
公司辞职信模板
2015/05/13 职场文书