如何用 Three.js 为 3D 场景添加阴影

2023-10-29 04:58:45

Three.js 中的阴影效果

阴影效果是 3D 图形中常用的技术，它可以使物体看起来更加真实和生动。阴影是由光线照射物体时产生的，当光线被物体遮挡时，物体背面的部分就会形成阴影。

在 Three.js 中，我们可以通过使用阴影贴图（shadow map）来实现阴影效果。阴影贴图是一种特殊的纹理贴图，它存储了光照场景中每个像素点的深度值。当我们渲染场景时，Three.js 会将阴影贴图与物体模型进行比较，并根据阴影贴图中的深度值来计算出物体的阴影。

如何添加阴影效果

要在 Three.js 中为 3D 场景添加阴影效果，我们需要执行以下步骤：

创建一个光源。光源可以是点光源、聚光灯或平行光。
创建一个阴影贴图。阴影贴图的大小应与场景中的物体大小相匹配。
将阴影贴图分配给光源。
启用阴影渲染。
渲染场景。

代码示例

以下代码示例展示了如何使用 Three.js 为 3D 场景添加阴影效果：

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个光源
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 1, 0 );
scene.add( light );

// 创建一个阴影贴图
const shadowMap = new THREE.WebGLRenderTarget( 1024, 1024 );

// 将阴影贴图分配给光源
light.shadow.map = shadowMap;

// 启用阴影渲染
renderer.shadowMap.enabled = true;

// 创建一个立方体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
const cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 0.5, 0 );
cube.castShadow = true;
scene.add( cube );

// 渲染场景
renderer.render( scene, camera );