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玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS验证字符串功能
Feb 22 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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
我的论坛源代码(六)
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php日历制作代码分享
2014/01/20 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
用Python创建声明性迷你语言的教程
2015/04/13 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python使用多进程的实例详解
2018/09/19 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
微型企业创业投资计划书
2014/01/10 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
青年文明号创建承诺
2014/03/31 职场文书
航空学院求职信
2014/06/11 职场文书
会议欢迎标语
2014/06/30 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL