Hello World(3)

这是Hello World的最后一篇，给场景加入了简单的灯光。

0. 本文做了什么

给场景加入了灯光。

1. 加入灯光

在Project类的构造函数里加入

// light{    let light = new THREE.PointLight(0xffffff);    light.position.y = 3;    this.scene.add(light);}

这段代码创建一个点光源，就是一个向四周发射光线的点；
常用的光源除了点光源还有线性光、环境光、聚光灯这3种不同的光源。

点光源的光线会随着距离变化而衰减，就像一个灯泡一样。

接着运行，你会发现并没有什么用，方块依然是红色的。
这是因为这个方块的材质是基础材质，是不受光线影响的。
想想如果受光线影响，那我们之前并没有加入任何光线，场景肯定是一片漆黑的；不只方块，就连地面我们都看不见。

下面我们要创建另一个物体，并给其附加上受光线影响的材质，来和这个方块作对比。

2. 添加光照模型所用的材质

接着上面的代码，我们先加入一个空的作用域块

// sphere{}

再在里面添加创建球的几何体代码

let geom = new THREE.SphereGeometry(0.5, 16, 16);

再创建Lambert材质

let mat = new THREE.MeshLambertMaterial({    color: 0x0000ff})

上述代码创建了一个Lambert材质，并给了它蓝色。
这个材质是一种光照模型的材质，可以用场景中的光源来渲染颜色。

最后创建球，并移到方块的旁边

let sphere = new THREE.Mesh(geom, mat);sphere.position.set(2, 0.5, 0);this.scene.add(sphere);

运行，你可以看到方块旁边多了一个有光泽的球

到这一步，你就成功添加了光照，是不是很简单呢？

3. 关于光照模型

你可以简单地把上面创建Lambert的代码更换成下面的

let mat = new THREE.MeshPhongMaterial({    color: 0x0000ff});

然后运行，仔细看，你会发现球有了高光（反光）的效果，因为在Lambert模型里物体是没有光泽的，只有明亮变化。
而Phong模型是现在常用的光照模型，可以表现出物体的漫反射和镜面反射效果；
就算塑料和金属有一样的颜色，也不会把它们渲染成一样。

你是不是很好奇怎么改了一个材质就有光照效果了？

其实这是three.js帮我们计算出来的，WebGL并没有固定渲染管线，一切你看见的效果都是用可编程渲染管线写出来的，这个是GLSL语言相关的内容。

4. 前路

有了这些基础知识，接下来，你就可以选择一个你感兴趣的方向继续学习了！

不过如果你的数学并不是很好，或者你还没有做过计算机图形学方面的事，
推荐你下一步学习坐标变换、旋转角表示、矩阵方面的内容。

有了这些知识，你才能放置你写的东西到画面中。