2.第一章2小节 材质贴图、光照和阴影

以下文章即Learn Threejs 第三版英文翻译学习记录，可以到正版书店购买对应书籍。

添加材质、光线在Three.js 中变得简单，它的操作原理和我们上一节提到的流程是一样的。

下面我们开始添加一个SpotLight光源：

var spotLight = new THREE.SpotLight(0xFFFFFF); 

spotLight.position.set(-40, 40, -15); 

spotLight.castShadow = true;

spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);

 spotLight.shadow.camera.far = 130; 

spotLight.shadow.camera.near = 40;

我们给SpotLight光源的设置了位置，而且打开了阴影的显示。在这段代码中，我们还给SpotLight设置了一个附加属性，例如...

不需要注重太多的细节，这些属性定义了渲染后的阴影呈现什么样的效果。我们将在第三章详细的介绍。

Threejs中还有很多不同的光源提供我们使用。（AmbientLight/AmbientLightProbe/DirectionalLight/DirectionnalLightShadow/HemisphereLight/HemisLightProbe/Light/LightProbe/LightShadow/PointLight/PointLightShadow/RectAreaLight/SpotLight/SpotLightShadow）

这时候如果我们渲染出的结果和上一次的结果毫无差别。原因是不同材质对光源的发应是不同的（意思材质影响光源的反射），在上一个例子中我们使用的材质MeshBasicMaterial在场景中是和光没有任何关系的，我们只是定义了一个颜色的材质。所以，我们需要更改对象上Mash的材质。

var planeGeometry = new THREE.PlaneGeometry(60,20);

var planeMaterial = new THREE.MeshLambertMaterial({color:

0xffffff});

var plane = new THREE.Mesh(planeGeometry, planeMaterial); ...

var cubeGeometry = new THREE.BoxGeometry(4,4,4);

var cubeMaterial = new THREE.MeshLambertMaterial({color:

0xff0000});

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); ...

var sphereGeometry = new THREE.SphereGeometry(4,20,20);

var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

这部分代码，我们设置了物体表面mash的材质MeshLambertMaterial，类似这样的材质MeshPhysicalMaterial、MeshStandardMaterial、包括废弃的MeshPhongMaterial，都提供了对Light光源影响的渲染（大致的意思就是这些材质反射关源）

以上的代码的运行结果，并不是我们想要得到的.

运行结果

我们可以看到，立方体和球体看起来没什么问题，但是没有阴影。具体的原因是渲染阴影会耗费大量的CPU资源，所以Threejs中默认是关闭的阴影渲染的。如果要打开这些，其实也是很简单的

renderer.setClearColor(new THREE.Color(0x000000)); 

renderer.setSize(window.innerWidth, window.innerHeight);

 renderer.shadowMap.Enabled = true;

我们需要做的第一个操作是告诉render，将渲染阴影选项打开。然而你会发现并没有什么区别，这是因为我们并没有确定哪些物体具有投影，带我们的示例中我们希望所有的物体具有阴影。所以你需要设置如下属性。

plane.receiveShadow = true; 

cube.castShadow = true;

sphere.castShadow = true;

现在，我们只需要一件事情将阴影显示出来，我们需要定义我们Scene中的哪一个Light将会影响物体的阴影。不是所有的Light可以使物体拥有阴影，在第三小节中我们会学到。我们在这节示例中使用的SpotLight，只需要设置它的castshadow的属性为true就可以显示出阴影，最终渲染出阴影。

...并没有加载出来阴影。