Three.js官网demo分析(三)— 聚光灯与阴影

63次阅读

共计 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;

正文完
 0