Three.js源码阅读笔记(光照部分)


Posted in Javascript onDecember 27, 2012

天气越来越冷了,人也越来越懒怠,越来越像呆在温暖的寝室里看小说或者打游戏,也好久没看Three.js源码了。今天天气不错,接着看!

这次从光照部分看起:光照模型,从光线本身角度来看包括环境光、平行光、点光源,从物体表面材质角度看又包括漫反射和镜面反射。

Lights:Light

THREE.Light = function ( hex ) { 
THREE.Object3D.call( this ); 
this.color = new THREE.Color( hex ); 
};

该对象是其他光照对象的原型/基类,本身继承自Object3D对象/类型。它自身只有一个THREE.Color类型的color属性,就是颜色,这很好理解。

在Three.js中,光照作为一种Object3D对象,是经过Scene.add()方法加入到场景中的,渲染器会自动渲染所加入的光照效果。
Light::AmbientLight

THREE.AmbientLight = function ( hex ) { 
THREE.Light.call( this, hex ); 
};

无方向的环境光,并没有比Light类型多一个属性或方法,而仅仅为了语义上的继承而继承自Light,它甚至没有必要是Object3D对象。

Light::DirectionalLight

THREE.DirectionalLight = function ( hex, intensity ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.castShadow = false; 
this.onlyShadow = false; 
// more settings about shadow ...... 
};

平行光(有方向的光),使用new运算符构造该函数时需传入颜色hex和光线的“密度”intensity。这个类有这样一些属性:
position:一个位置,以该位置为起点,原点为终点的方向是光线的方向。
intensity:光线的密度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。
distance:衰减距离,默认值为0,光照无衰减;如果是非0值,光照会从position位置(实际上是position所处的那个平面)开始衰减,衰减到distance距离之后,光照强度intensity为0。
castShadow:布尔值,控制是否产生阴影,默认为false。如果设为true,对于所有表面都会逐像元地计算其在光照方向上是否被遮挡,这会消耗大量的计算。
onlyShadow:布尔值,控制是否只产生阴影而不“照亮”物体,默认为false。这种模式也许有什么特殊应用吧。
shadowCameraLeft,shadowCameraRight……系列,以position点为中心控制产生阴影的范围?
shadowBias:阴影偏心,默认为0。
shadowDarkness:阴影对物体亮度的影响,在0~1之间,默认为0.5。
还有不少属性暂时猜不出含义(真该去补补计算机图形学啊,硬着头皮继续看吧)。

Light::PointLight

THREE.PointLight = function ( hex, intensity, distance ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 0, 0 ); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
};

点光源,position那肯定就是光源点了。注意点光源的position和平行光的position的区别,前者默认在原点,而后者默认在点(0,1,1),这使得默认的平行光方向和相机的默认朝向一致。
其他两个属性和平行光中一样。PointLight点光源没有关于如何产生阴影的设定。

Light::SpotLight

THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) { 
THREE.Light.call( this, hex ); 
this.position = new THREE.Vector3( 0, 1, 0 ); 
this.target = new THREE.Object3D(); 
this.intensity = ( intensity !== undefined ) ? intensity : 1; 
this.distance = ( distance !== undefined ) ? distance : 0; 
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2; 
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow... 
};

一种可以在某个方向上产生阴影的点光源,影响MeshLamberMaterial和MeshPhongMaterial类型材质的表面。对阴影如何处理的设定和DirectionLight一致。
总之,光照对象并不承担渲染光照的任务,而仅仅是定义如何渲染光照。
Object::Partical
  
THREE.Particle = function ( material ) { 
THREE.Object3D.call( this ); 
this.material = material; 
};

粒子就是一个由材质的Object3D,这很好理解。Object3D对象提供一个坐标(就是粒子的坐标),负责粒子的运动,粒子只需要指定表现它的材质即可。

Object::ParticalSystem

THREE.ParticleSystem = function ( geometry, material ) { 
THREE.Object3D.call( this ); 
this.geometry = geometry; 
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } ); 
this.sortParticles = false; 
if ( this.geometry ) { 
if( this.geometry.boundingSphere === null ) { 
this.geometry.computeBoundingSphere(); 
} 
this.boundRadius = geometry.boundingSphere.radius; 
} 
this.frustumCulled = false; 
};

粒子系统表现多个粒子的运动,粒子系统本身继承自是Object3D对象。有这样几个属性:
geometry属性,每一个节点都是一个粒子,这些共享一个材质。
material属性,即这些节点的材质。

frustumCulled属性,布尔值,如果设定为真,那么在相机视界之外的会被踢出,但还没弄清楚是粒子系统中心坐标在视界外就踢出整个粒子系统还是单个粒子出去了就剔除,猜测多半是后者。

其实这几篇都是涉及怎么定义场景的,至于怎么渲染场景很难有深入。我准备接下来去看Demo的代码,结合者看看WebGLRenderer类的源代码(几千行OMG)。

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
清空上传控件input file的值
Jul 03 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
通过jQuery源码学习javascript(三)
Dec 27 #Javascript
JS原型对象通俗"唱法"
Dec 27 #Javascript
通过jQuery源码学习javascript(二)
Dec 27 #Javascript
js 判断一个元素是否在页面中存在
Dec 27 #Javascript
通过jQuery源码学习javascript(一)
Dec 27 #Javascript
Eval and new funciton not the same thing
Dec 27 #Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 #Javascript
You might like
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python去掉空白行的多种实现代码
2018/03/19 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Python加速程序运行的方法
2020/07/29 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
早餐连锁店计划书
2014/01/08 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
党务公开方案
2014/05/06 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
单位委托函范文
2015/01/29 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技