共计 1562 个字符，预计需要花费 4 分钟才能阅读完成。
这是今天要分析的 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;