ThreeJS入门（109）：THREE.LightShadow 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 109篇入门文章

THREE.LightShadow 是 Three.js 中用于处理光源阴影的一个类。它允许光源投射阴影，从而增加场景的真实感。光源阴影通过投影技术来模拟，通常使用正交或透视投影将光源周围的场景渲染到一个或多个阴影贴图中，然后在渲染主场景时使用这些阴影贴图来计算阴影效果。

构造函数

构造函数 new THREE.LightShadow(camera) 接受一个参数来定义阴影相机：

• camera: 一个 THREE.Camera 对象，用于定义阴影贴图的视角和投影。

属性

THREE.LightShadow 的实例拥有以下属性：

• camera: 用于生成阴影贴图的相机。
• bias: 阴影偏差值，用于调整阴影贴图中深度测试的精度。默认值为 0。
• mapSize: 阴影贴图的大小。默认值为 new THREE.Vector2(512, 512)。
• needsUpdate: 表示阴影贴图是否需要更新。默认值为 false。
• visibleFaceCount: 可见面的数量，在某些情况下用于优化阴影贴图的生成。

方法

THREE.LightShadow 提供了以下方法来操作阴影：

• update(): 更新阴影贴图。
• dispose(): 清理与阴影贴图相关的资源。

如何使用 THREE.LightShadow

要使光源能够投射阴影，首先需要创建一个 THREE.LightShadow 实例，并将其附加到光源对象上。通常，这涉及到以下几个步骤：

1. 配置光源：确保光源支持阴影投射。
2. 配置阴影相机：设置相机的投影模式、视场、近远裁剪面等。
3. 附加阴影：将 THREE.LightShadow 实例附加到光源上。
4. 更新场景：在每一帧渲染之前，更新光源的阴影贴图。

示例：创建一个带有阴影的光源

假设你想在一个 Three.js 场景中创建一个带有阴影的光源：

// 创建一个平行光光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(10, 10, 10);

// 创建一个用于阴影贴图的相机
const shadowCamera = new THREE.OrthographicCamera(
    -20, 20, 20, -20, 0.1, 100
);

// 创建一个阴影对象，并将其附加到光源上
const lightShadow = new THREE.LightShadow(shadowCamera);
lightShadow.bias = -0.0001; // 设置阴影偏差值
lightShadow.mapSize.set(1024, 1024); // 设置阴影贴图的大小
directionalLight.castShadow = true;
directionalLight.shadow = lightShadow;

// 启用场景中的阴影投射
renderer.shadowMap.enabled = true;

// 将光源添加到场景中
scene.add(directionalLight);

// 添加一个网格以接收阴影
const geometry = new THREE.PlaneGeometry(60, 20, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xcccccc });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -5;
scene.add(plane);

// 添加一个立方体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 3, 0);
cube.castShadow = true; // 启用立方体的阴影投射
scene.add(cube);

总结

THREE.LightShadow 是 Three.js 中用于处理光源阴影的一个类，提供了定义阴影的基本属性和方法。通过这些方法，你可以创建真实的阴影效果，并利用这些阴影来增强场景的真实性。在 Three.js 的许多功能中，THREE.LightShadow 对于实现阴影效果非常重要。理解并熟练使用 THREE.LightShadow 对于开发高质量的 Three.js 应用程序是非常有帮助的。