threejs设置阴影

为了在Three.js中设置阴影，需要执行以下四个步骤：

1. 首先，需要在渲染器中启用阴影属性。这可以通过设置`renderer.shadowMap.enabled`为`true`来实现。

2. 接下来，需要为需要投射阴影的光源设置阴影属性。这可以通过设置光源的`castShadow`属性为`true`来实现。

3. 然后，需要为需要接收阴影的物体设置阴影属性。这可以通过设置物体的`receiveShadow`属性为`true`来实现。

4. 最后，需要为需要投射阴影的物体设置阴影属性。这可以通过设置物体的`castShadow`属性为`true`来实现。

下面是一个示例代码，演示如何在Three.js中设置阴影：

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影属性
document.body.appendChild(renderer.domElement);

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

// 创建相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);

// 创建光源
const light = new THREE.SpotLight(0xffffff);
light.position.set(0, 10, 10);
light.castShadow = true; // 设置光源投射阴影
scene.add(light);

// 创建立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0, 0);
cube.receiveShadow = true; // 设置立方体接收阴影
cube.castShadow = true; // 设置立方体投射阴影
scene.add(cube);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -1;
plane.receiveShadow = true; // 设置地面接收阴影
scene.add(plane);

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