Three.js中的平行光源阴影

2023-03-04 08:56:12

Three.js 平行光源阴影：打造逼真三维场景的秘密武器

在三维世界中，逼真的阴影效果至关重要，因为它可以赋予场景深度和真实感。在 Three.js 中，使用平行光源（DirectionalLight）可以轻松实现阴影效果。

平行光源阴影原理

平行光源阴影的原理很简单：通过放置一个虚拟相机来模拟平行光源的视角，然后使用此相机渲染场景。在渲染结果中，所有被平行光源照射到的物体都会产生阴影，而被遮挡的物体则不会。

设置平行光源阴影

要使用平行光源阴影，你需要首先创建一个平行光源对象并将其添加到场景中。然后，你需要设置阴影属性，包括是否启用阴影投射，以及阴影贴图的大小。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

应用平行光源阴影

设置完阴影属性后，就可以将物体添加到平行光源的阴影组中，这样物体就会产生阴影了。

const shadowGroup = light.shadow.group;
shadowGroup.add(object);

平行光源阴影效果

平行光源阴影可以产生非常逼真的效果，让物体看起来更加真实。它还可用于创建各种特殊效果，例如阴影投影和阴影剪影。

代码示例

以下是一个使用平行光源阴影的代码示例：

<canvas id="myCanvas"></canvas>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);

const shadowGroup = light.shadow.group;
shadowGroup.add(cube);

camera.position.z = 5;
camera.lookAt(cube.position);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();