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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python实现可逆简单的加密算法
2019/03/22 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
python和JavaScript哪个容易上手
2020/06/23 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
技校生自我鉴定
2013/12/08 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
员工试用期自我评价
2014/09/18 职场文书
离婚财产分配协议书
2014/10/21 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
python_tkinter弹出对话框创建
2022/03/20 Python