3d弹弹球(加强版)

上篇文章带读者完成了一个3d弹弹球，本文我们来继续看看这个3d弹弹球的一个增强版，即给弹弹球添加上光线和阴影。

本文是threejs系列的第四篇，阅读前面的文章有助于更好的理解本文：

---

1.一个简单的案例，理解threejs中几个基本概念
2.三维世界中的坐标系
3.3d弹弹球

---

添加灯光

本文的案例在上文的基础上完成，首先通过SpotLight构造一个灯光，添加到场景中，如下：

var spotLight = new THREE.SpotLight(0xffffff);	
spotLight.position.set(-40, 60, -10);	
spotLight.castShadow = true;	
scene.add(spotLight);

构造光源时，参数表示光源的颜色，然后设置光源的位置为(-40,60,-10)，这个坐标在三维坐标系的第6卦限中，同时设置castShadow为true，表示这个光源会产生阴影，不过单纯的添加光源，并不能使物体的颜色作出改变，还需要修改组件的材料，代码如下：

var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);	
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});	
var plane = new THREE.Mesh(planeGeometry, planeMaterial);	
plane.rotation.x = -0.5 * Math.PI;	
plane.position.set(15, 0, 0);	
scene.add(plane);	
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);	
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff, wireframe: true});	
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);	
sphere.position.set(20, 4, 2);	
scene.add(sphere);

和上文相比，这里主要是将物体材料由MeshBasicMaterial转为MeshLambertMaterial，其他的均未变化，最终显示效果如下：

可以看到，球体背光一侧为黑色的，plane离光源远的地方颜色也暗淡（由于gif录制的原因，这里看起来色彩不均匀，实际上是均匀的，读者可以文末下载源码查看）。

作为比较，如果不添加光源，效果如下：

添加阴影

此时并没有阴影展现出来，要使阴影展示出来，需要从三个方面作出改变：1.render支持；2.组件支持；3.灯光支持，其中灯光支持我们在上文已经添加了，render支持和组件支持则未添加，添加方式如下：

render.shadowMapEnabled = true;	
plane.receiveShadow = true;	
sphere.castShadow = true;

有了阴影支持之后，再来运行，结果如下：

好了，这样一个简单的案例，向读者展示了灯光和阴影的简单用法，有问题欢迎留言讨论。

本文案例：https://github.com/lenve/threejsDemo

▼往期精彩回顾▼ Docker教程 Redis教程 SpringCloud教程 Git教程 MongoDB教程 SpringBoot+Vue前后端分离开源项目-微人事 SpringBoot+Vue前后端分离开源项目-V部落