three.js学习笔记太阳眩光

当你朝着太阳光方向拍照就会看到镜头的眩光，为了使场景更加真实我们可以给3D场景添加太阳眩光。

这里我们简单地制作了一个太阳眩光并将它添加到场景中。

添加太阳眩光：

1.renderer需要开启alpha模式

renderer = new THREE.WebGLRenderer({antialias: true,alpha: true});

2.添加一个spotLight光源

var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(50, 10, -50);scene.add(spotLight);

3.实例化THREE.LensFlare对象

var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0, THREE.AdditiveBlending, flareColor);

这里添加了多组参数是图形尽量不失真

4.设置THREE.LensFlare和spotLight光源在同一位置

lensFlare.position = spotLight.position;

完整代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>three.js</title></head><body><style>body {margin: 0;overflow: hidden;}</style><script type="text/javascript" src="js/Three/three.js"></script><script>var renderer, scene, camera, light, mesh, cylinder, plane;var spotLight, sphereLightMesh;var invert = 1;var phase = 0;function init() {renderer = new THREE.WebGLRenderer({antialias: true,alpha: true});renderer.setClearColor(0x000000);renderer.setSize(window.innerWidth, window.innerHeight);scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(-50, 15, 50);camera.lookAt(new THREE.Vector3(10, 10, 10));document.body.appendChild(renderer.domElement);addSun();render();}function addSun() {var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(50, 10, -50);scene.add(spotLight);var textureFlare0 = THREE.ImageUtils.loadTexture("img/lensflare0_alpha.png");var textureFlare3 = THREE.ImageUtils.loadTexture("img/lensflare3.png");var flareColor = new THREE.Color(0xffffff);var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0, THREE.AdditiveBlending, flareColor);lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);lensFlare.position = spotLight.position;scene.add(lensFlare);}function render() {requestAnimationFrame(render);renderer.render(scene, camera);}init();</script></body>
</html>

fork me on github blog: https://chenjy1225.github.io/

three.js学习笔记太阳眩光相关推荐

html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端一: 全局对象 Node. ...

three.js学习笔记太阳眩光

three.js学习笔记太阳眩光相关推荐

最新文章

热门文章

three.js学习笔记 太阳眩光

three.js学习笔记 太阳眩光相关推荐

最新文章

热门文章

three.js学习笔记太阳眩光

three.js学习笔记太阳眩光相关推荐