当然可以！在Three.js里完全能把阴影改成任意你想要的颜色，我来给你一步步讲清楚怎么操作～

1. 先确保阴影功能正常开启 #

在改颜色之前，得先把基础的阴影配置做好，不然设置颜色也看不到效果：

• 渲染器开启阴影：renderer.shadowMap.enabled = true;（如果想要更柔和的阴影，可以设置renderer.shadowMap.type = THREE.PCFSoftShadowMap;）
• 让光源具备投射阴影的能力：light.castShadow = true;（注意：环境光AmbientLight不支持投射阴影，常用的方向光DirectionalLight、聚光灯SpotLight、点光源PointLight都可以）
• 给需要投射阴影的物体开启投射：mesh.castShadow = true;
• 给需要接收阴影的物体开启接收：mesh.receiveShadow = true;

2. 核心操作：修改阴影颜色 #

这一步非常简单，直接调整光源的shadow.color属性就行，它接受一个THREE.Color对象，支持多种设置方式：

• 用十六进制颜色字符串：light.shadow.color = new THREE.Color('#ff6600');（暖橙色阴影）
• 用RGB数值（范围0-1）：light.shadow.color = new THREE.Color(0, 1, 0);（绿色阴影）
• 用十六进制数值：light.shadow.color = new THREE.Color(0x00ffff);（青色阴影）

3. 一些实用注意事项 #

• 阴影的透明度没法通过shadow.color直接设置，因为这个属性只控制RGB通道。如果需要调整阴影的深浅或透明度，可以结合光源强度、阴影的bias/radius参数，或者材质的相关属性来微调，不过一般自定义颜色的话，上面的方法就够用啦。
• 不同光源的阴影相机参数需要单独调整（比如方向光要设置shadow.camera.left/right等范围，点光源要调整shadow.camera.far），但颜色设置逻辑都是一样的。

完整示例片段 #

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

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

// 方向光+开启阴影+设置阴影颜色
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 7.5);
dirLight.castShadow = true;
// 把阴影改成紫色
dirLight.shadow.color = new THREE.Color('#9933ff');
// 调整方向光阴影相机范围
dirLight.shadow.camera.left = -10;
dirLight.shadow.camera.right = 10;
dirLight.shadow.camera.top = 10;
dirLight.shadow.camera.bottom = -10;
scene.add(dirLight);

// 地面（接收阴影）
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshStandardMaterial({ color: 0xcccccc })
);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

// 立方体（投射阴影）
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(2, 2, 2),
  new THREE.MeshStandardMaterial({ color: 0xff0000 })
);
cube.position.y = 1;
cube.castShadow = true;
scene.add(cube);

// 相机设置
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

运行这段代码，你就能看到红色立方体投射出紫色的阴影在灰色地面上啦～

内容的提问来源于stack exchange，提问作者Detuned