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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
浅谈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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
python中去空格函数的用法
2014/08/21 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
简单了解python中的与或非运算
2019/09/18 Python
django中瀑布流写法实例代码
2019/10/14 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python属于解释语言吗
2020/06/11 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
合伙购房协议样本
2014/10/06 职场文书
技术支持岗位职责
2015/02/13 职场文书
财政局长个人总结
2015/03/04 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
银行服务理念口号
2015/12/25 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
详解Oracle块修改跟踪功能
2021/11/07 Oracle