Three.js官网demo分析（三）--- 聚光灯与阴影

这是今天要分析的demo，这是源码下面来分析几段代码1.控制器的设置 // 初始化控制器 var controls = new THREE.OrbitControls( camera, renderer.domElement ); // 如果有animate函数，直接在函数里用controls.update(), 不用下面的方式 controls.addEventListener( ‘change’, render ); // 最大最小移动距离 controls.minDistance = 20; controls.maxDistance = 500; // 是否可以平移 controls.enablePan = true; // 平移速度 controls.keyPanSpeed = 89; // 控制器聚焦的对象 controls.target.copy( mesh.position ); controls.update();2.初始化聚光灯 // 初始化聚光灯 spotLight = new THREE.SpotLight( 0xffffff, 1 ); // 聚光灯的位置 spotLight.position.set( 50, 20, 0 ); // 聚光灯光束的角度，设置的是角的一边到角度二分线的角度 spotLight.angle = Math.PI / 6; // 光束从中心到边缘衰减的百分比，值为从0到1的数字 spotLight.penumbra = 0.5; // 沿着光照距离的衰减量, 但我改变数值没什么变化 spotLight.decay = 20; // 从光源发出光的最大距离，其强度根据光源的距离线性衰减 spotLight.distance = 200;3.阴影的设置 // 是否投射阴影 spotLight.castShadow = true; // 设置阴影的分辨率 spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; // 阴影能显示的近点和远点 spotLight.shadow.camera.near = 10; spotLight.shadow.camera.far = 20; scene.add( spotLight );4.辅助线的引入 // 模拟聚光灯的辅助线 lightHelper = new THREE.SpotLightHelper( spotLight ); scene.add( lightHelper ); // 拟灯光相机的视椎体，传入的参数相当于产生阴影的灯光相机 shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera ); scene.add( shadowCameraHelper ); // 坐标轴 scene.add( new THREE.AxesHelper( 10 ) );需要注意的是shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera )这句，生成视椎体如下它模拟的是灯光相机的视椎体，并不是我们定义的相机的视椎体，传入的参数是灯光相机，即spotLight.shadow5.阴影的产生首先要渲染器声明使用阴影贴图 // 设置使用阴影贴图 ?? renderer.shadowMap.enabled = true; // 定义阴影贴图类型 ?? 据说这个类型的阴影看起来比较清晰 renderer.shadowMap.type = THREE.PCFSoftShadowMap;然后灯光设置 // 是否投射阴影 spotLight.castShadow = true;之后设置材质是否接受阴影 // 材质是否接受阴影 mesh.receiveShadow = true;最后设置材质是否投射阴影 // 对象是否被渲染到阴影贴图中 mesh.castShadow = true;