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插件冲突的问题
Jan 23 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
简单实现jquery焦点图
Dec 12 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
es6数据变更同步到视图层的方法
Mar 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python fileinput模块使用实例
2015/06/03 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python中xlutils库用法浅析
2020/12/29 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
节约粮食标语
2014/06/18 职场文书
师范类求职信
2014/06/21 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
校运会班级霸气口号
2015/12/24 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
css3带你实现3D转换效果
2022/02/24 HTML / CSS