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代码
Jul 20 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
python重试装饰器示例
2014/02/11 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python中的集合介绍
2019/01/28 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python中reload重载实例用法
2020/12/15 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
社区活动邀请函范文
2014/01/29 职场文书
迟到早退检讨书
2014/02/10 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
先进事迹材料范文
2014/12/29 职场文书
生活小常识广播稿
2015/08/19 职场文书