以下文章即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就可以显示出阴影，最终渲染出阴影。
...并没有加载出来阴影。
网友评论