three.js中都多种灯光和材质，这里只是添加了一种灯光，聚光灯spotLight。
首先构建一个spotLight对象：
var spotLight = new THREE.SpotLight（0xFFFFFF）；
指定光源的位置，从何处开始照射：
spotLight.position.set（-40,60，-10）；把光源变量加入到场景：
scene.add（spotLight）；材质：MeshBasicMaterial是基本的材质模型，它对光源产生任何反应。
MeshLambertMaterial 材质和MeshPhongMaterial材质会对光源产生反应。具体的区别不太了解。如果要物体对光照产生反应，把材质改为上述中的一种。
把第一个例子中的立方体的材质修改为 MeshLambertMaterial ：
var cubeMaterial = new THREE.MeshLambertMaterial（{color:0xffffff}）;阴影：Three.JS默认是不渲染出阴影的，这是比较耗费计算资源的。但是可以指定让渲染的时候渲染出阴影。
确定让渲染器渲染出阴影：
renderer.shadowMapEnabled = true；指出那个物体会接受物体投射出的阴影，就是说，物体投射出的阴影会显示在哪个物体。例子中，指定平面会接受物体投射出的阴影，就是说其他物体投射出的阴影会出现在平面上，不会跑到其他地方。
指定平面接受物体投射出的阴影：
plane.receiveShadow = true；指定那个物体会投射阴影，指定哪个物体会投射阴影，不指定的物体就不会投射阴影。
指定立方体投射会投射阴影：
cube.castShadow = true；最后，指定由哪个光源照射物体来投射阴影，并不是所有的光源都可以产生阴影。物体有阴影，必须要有光源照射吧！
指定由前面建立的聚光灯spotLight来照射物体产生阴影：
spotLight.castShadow = true；代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js 第一章学习</title>
<!--需要的基本JS库-->
<script src="jquery19.js"></script>
<script src="three.js"></script>
<script src ="stats.js"></script>
<script src = "dat.gui.js"></script>
<script src = "controlKit.js"></script>
<!--给body加入一个样式，边框为0（零，不显示边框）；滚动条隐藏-->
<style type="text/css"> body{ margin: 0; overflow: hidden; } </style>
</head>
<body>
<!--建立一个DIV，WebGL渲染的基本物体会在此处输出-->
<div id="WebGL-output">
</div>
<!--定义一个JQuery函数，所有的WebGL操作展示将在该函数中进行-->
<script type="text/javascript"> $(function () { <!--构建场景--> var scene = new THREE.Scene(); <!--建立相机，查看场景,透视相机--> var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); <!--构建渲染器，进行渲染--> var renderer = new THREE.WebGLRenderer(); <!--渲染背景色,不知道为什么在此学习过程中，该函数setClearColorHex()老是提示错误？--> // renderer.setClearColorHex(0xEEEEEE); renderer.setClearColor(0xAAFFCC); <!--渲染尺寸--> renderer.setSize(window.innerWidth,window.innerHeight); <!--告诉渲染器需要渲染出阴影--> renderer.shadowMapEnabled = true; <!--添加一个辅助坐标轴--> var axes = new THREE.AxisHelper(20); scene.add(axes); <!--构建一个平面，物体将会放置在这个平面上--> <!--平面尺寸，100x60，宽度方向平分几分，高度方向平分几分，如果参数最后2位不是（1,1），平面会显示为网格平面--> var planeGeometry = new THREE.PlaneGeometry(100,60,10,10); <!--平面材质,仅仅指定颜色 0xcccccc--> // var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc}); <!--临时修改材质为MeshLambertMaterial--> var planeMaterial = new THREE.MeshLambertMaterial({color:0xFFFFFF}); <!--有尺寸和材质构建一个平面--> var plane = new THREE.Mesh(planeGeometry,planeMaterial); <!--把平面选择-90°，方便观察--> plane.rotation.x = -0.5*Math.PI; <!--指定平面的位置--> plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; <!--指定平面接受阴影，就是物体投射出的阴影会出现在该平面上--> plane.receiveShadow = true; <!--把平面加入到场景中--> scene.add(plane); <!--建立物体，一个立方体，一个球体--> <!--建立一个立方体--> <!--指定立方体的几何尺寸，长宽高，不包括位置--> var cubeGeometry = new THREE.CubeGeometry(4,4,4); <!--指定立方体的材质，仅仅指定颜色：0xFF0000，是否使用线框模式显示：是--> // var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true}); <!--临时修改材质为MeshLambertMaterial--> var cubeMaterial = new THREE.MeshLambertMaterial({color:0xFF0000}); <!--以给定的几何尺寸和材质构建一个立方体--> var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); <!--指定立方体的具体位置xyz--> cube.position.x =-4; cube.position.y =3; cube.position.z = 0; <!--指出物体会投射阴影--> cube.castShadow = true; <!--把建立的立方体放入场景--> scene.add(cube); <!--建立一个球体sphere--> <!--指定球体的几何尺寸，不包括位置；最后2个参数感觉是指定网格密度--> var sphereGeometry = new THREE.SphereGeometry(4,50,50); <!--指定球体材质，仅仅指定颜色：0xFF0000，是否以线框形式显示：是--> // var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true}); <!--临时修改材质为MeshLambertMaterial--> var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777FF}); <!--以给定的几何尺寸和材质，建立一个球体--> var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); <!--指定球体的位置 X Y Z--> sphere.position.x =20; sphere.position.y=4; sphere.position.z = 0; <!--指出物体会投射阴影--> sphere.castShadow = true; <!--把建立的球体加入到场景中--> scene.add(sphere); <!--建立一个聚光灯变量，用来照射物体来产生阴影--> <!--建立一个spotLight变量，指定颜色：0xFFFFFF--> var spotLight = new THREE.SpotLight(0xFFFFFF); <!--指定spotLight的位置--> spotLight.position.set(-40,60,-10); <!--指出此光源照射物体，使物体产生阴影--> spotLight.castShadow = true; <!--把spotLight加入到场景中--> scene.add(spotLight); <!--指定相机的位置和方向，决定我们在场景中如何看，能看到什么--> camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); <!--利用JQuery查找到ID为WebGL-output的DIV，并把渲染到的东西输出到该DIV--> $("#WebGL-output").append(renderer.domElement); <!--利用渲染器以给定的相机去渲染场景--> renderer.render(scene,camera); }) ; </script>
</body>
</html>效果如下：
