曾经,我非常羡慕那些人见人爱的人,我也想要变成那样,可是后来我才明白人见人爱也是需要天赋的,后来我开始默默努力,我想,就算我不能让每个人都喜欢我,至少因为我做的努力能得到别人的尊重。

webgl之五彩光源

一、Three.js中有哪些光源?

  在Three.js中,光源有一个基类THREE.Light(hex),这个hex接受16进制颜色作为参数而初始化光源的颜色,比如我们要定义一种绿色的光源,可以这样来定义:

var greenLight = new THREE.Light(0x00FF00);

  而作为3d引擎three.js,这个基类是很难满足我们的要求的,所以,我们还需要继承这个基类的更多样化的光源:

    即除了这个基类光源之外,我们还有环境光、区域光、方向光、聚光灯、点光源等等。下面我们介绍一些常用的光源。

 

(1)环境光

  环境光是经过多次反射而来的光,所以无法确定其最初的方向。 它是一种无处不在的光,其光源可以认为是来自任何方向。所以,当我们制定场景光源为环境光时,所有的物体都会表现出同样的明暗程度,环境光可以用 THREE.AmbientLight 来表示,他的构造函数即为 THREE.AmbientLight(hex); ,它仍然接受16进制颜色作为参数,如下:

var light = new THREE.AmbientLight(0xff00000);
scene.add(light);

  如上,加入光源之后,场景就能够通过光源渲染出效果了。

 

(2)点光源

  由这种光源放出的光线是来自同一点的,且方向是辐射到四面八方的。比如家里灯泡就是一个点光源。构造函数如下:

var light = new THREE.PointLight(color, intensity, distance);
  1. color,即光的颜色。
  2. intensity,即光的强度,取值在0到1之间,默认是1.0,即强度最高。
  3. distance,即光的距离,从光源所在的位置,经过distance转举例之后,光的强度将从Intensity衰减为0. 默认情况下这个值为0.0,表示光源强度不衰减。

 

 

(3)聚光灯

  这种光源的光线从一个椎体中射出,在被照射的物体上产生聚光的效果,使用这种光源需要指定光的射出方向以及椎体的顶角α,如下:

  我们可以使用如下构造函数:

var light = nwe THREE.SpotLight(hex, intensity, distance, angle, exponent);
  • hex就是聚光灯的16进制颜色。
  • Intensity同样是光源的强度。
  • distance是光源强度从设定到0的举例,默认为0,即光不衰减。
  • Angle是聚光灯着色的角度,用弧度作为单位。
  • exponent是光源模型中衰减的一个参数,这个参数值越大,则衰减越快。

  

(4)平行光

  平行光又称为方向光(Directional Light),是一组没有衰减的平行额光线,类似太阳光的效果,

  构造函数如下所示:

var lignt = new THREE.DirectionalLight(hex, intensity);

 其中,Hex就是光的颜色,而Intensity就是光的千古。

 

 

 

 

二、光源和材质的关系

   我们在屏幕上画一个物体,不带任何的光源,定义物体的颜色为黑色,其值为0x000000,定义材质如下:

var material = new THREE.MeshLambertMaterial( { color:0x000000} ); // 这是兰伯特材质,材质中的一种

  那么最终的效果就是什么也看不到。并且实际上我们可以得到从这里并不那么容易可以得到的结论:

  如果在没有任何光源的情况下,最终的颜色都将是黑色,无论材质是什么颜色。 所以说在白天时,我们看到的物体的颜色实际上是物体没能吸收的颜色,我们才看到了,而黑夜情况下,物体什么都吸收不了,自然我们什么也就看不到了。

  

  而接下来我们要说的是Lambert(兰伯特)材质,这是在灰暗的或者不光滑的表面产生均匀散射而形成的材质类型。比如一张纸就是Lambert表面,它粗糙、均匀。它会在所有的反向上均匀地散射灯光,所以Lambert材质会受到环境光的影响,呈现环境光的颜色,与材质本身颜色关系不大。

  

  而环境光就是在场景中无处不在的光,它对物体的影响是均匀的,也就是说无论你从物体的哪个角度观察,物体的颜色都是一样的,这就是环境光了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

posted @ 2018-05-01 15:48  Wayne-Zhu  阅读(802)  评论(0编辑  收藏  举报

一分耕耘,一分收获。