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.shadow

5.阴影的产生
首先要渲染器声明使用阴影贴图

                // 设置使用阴影贴图  ??
                renderer.shadowMap.enabled = true;
                // 定义阴影贴图类型  ?? 据说这个类型的阴影看起来比较清晰
                renderer.shadowMap.type = THREE.PCFSoftShadowMap;

然后灯光设置

                // 是否投射阴影
                spotLight.castShadow = true;

之后设置材质是否接受阴影

            // 材质是否接受阴影
            mesh.receiveShadow = true;

最后设置材质是否投射阴影

            // 对象是否被渲染到阴影贴图中
            mesh.castShadow = true;