第5章 五彩的光源(三)

1、本章你将了解怎么使用光源

2、以及各种光源的区别,这些区别会通过实例对比来给大家讲清楚。这种对比方式应该是讲解最好的思路。

6、环境光和方向光

接下来,我们来看看多种光源同时存在于场景之中,对物体颜色的影响。

当环境光和方向光同时存在的时候,会出现怎么样的情况呢?可以把这种情况想成两种光源同时作用于物体,它产生的情况,和每种光源分别作用于物体,然后将两者的结果相加,是一样的效果。首先看看下面的代码:

	 function initLight() {

                light = new THREE.AmbientLight(0x00FF00);

                light.position.set(100, 100, 200);

                scene.add(light);

                // 方向光

                light = new THREE.DirectionalLight(0xFF0000);

                light.position.set(0, 0,1);

                scene.add(light);

            }
            

从代码上可以看出,环境光是绿色0x00FF00,方向光是红色0xFF0000,

我们来看看只有环境光,把方向光去掉的时候,渲染的结果是怎么样的:

反过来,只有方向光的情况,没有环境光的时候,渲染的结果又会是怎么样呢?看看下图:

是的,总结一下,当方向光照射过来的时候,被照射的表面呈现光的颜色,而由于是方向光,没有照射到的表面,就呈现暗色,一般是黑色,表示没有任何光源照到该表面。

ok,好了,现在我们将环境光和方向光都加上,看看会出现什么效果,也会你已经猜到了效果,不过我还是不厌其烦的给你演示一次。

好了,我们马上来总结一下:

1.首先方向光,是如图箭头的方向着色到物体的。而环境光由于与位置没有关系,方向又是任何方向都可以照射的,所以我们不管光的方向。

2、图中绿色的部分,是由环境光造成的。由于方向光根本照射不到绿色的部分,所以,这部分只有环境光对其影响。

3、图中黄色的部分是由环境光和方向光共同作用而成的,其实是两种光源颜色的简单相加,

0x00FF00 + 0xFF0000 = 0xFFFF00,oxFFFF00 就是黄色。

7、点光源

点光源是理想化为质点的向四面八方发出光线的光源。点光源是抽象化了的物理概念,为了把物理问题的研究简单化。就像平时说的光滑平面,质点,无空气阻力一样,点光源在现实中也是不存在的,指的是从一个点向周围空间均匀发光的光源。

点光源的特点是发光部分为一个小圆面,近似一个点

下面的例子介绍了怎么使用点光源:

light = new THREE.PointLight(0xFF0000);

light.position.set(0, 0,50);

scene.add(light);

效果如下图:

点光源就是在一个点向周围发出的光,所以,你会看到照在物体上的光,有点像球的形状。改变点光源的位置,那么得到的效果图又会有一些区别。

将光源的位置改在(0, 0,25),则刚好在一个长方体的边上,效果图如下所示:

比较上面两幅图,你会发现,第二幅图和第一幅被照射的位置是不一样的。第二幅图,由于刚好在中间的一个长方形的边上,所以被边挡住,只有长方体内部受到光源,而外部面没有受到光源的,所以呈现黑色。

从这里也反应出了,一个面分前后两个面的,只有被光源照射的那个面才能够被看到。

8、混合光源

将方向光和点光源混合使用。

效果如图所示:

这一节课的还会有更新,不太完美,敬请原谅。
[1楼] xiao** 2016-08-13 19:25

一个面分前后两个面是指内表面和外表面吗

[2楼] anjo** 2016-11-30 11:18

楼上,一个立体存在多个面,这个前后就是立体图形的前后面~不是内表面和外表面

[3楼] woni** 2016-12-04 19:49

应该是1楼说的那样。注意:教程说的是一个面分前后两个面,不是一个长方体分前后面。

[4楼] mm00** 2017-01-18 16:02

倒数第二幅图,光源照射了中间长方体的内部,但是仍然照射了其他长方体的外部,是不是可以理解为,光即使在内部,也没有被中间长方体挡住,仍然可以照射其他物体???

[5楼] LamJ** 2017-06-06 13:42

老师 我想问下 为什么我在场景中加入了Light,但是运动状态中的物体还是没有显示出阴影的效果呢?

[6楼] thre** 2017-07-18 14:42

5楼,方向光才有阴影

[7楼] loly** 2017-09-26 11:20

环境光不需要设置position吧

提问或评论

登陆后才可留言或提问哦:) 登陆 | 注册 登陆后请返回本课提问
用户名
密   码
验证码