DirectionalLight与shadow

最新推荐文章于 2025-06-22 14:21:12 发布

brazen__

最新推荐文章于 2025-06-22 14:21:12 发布

阅读量799

点赞数 1

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： three.js DirectionalLight shadow

本文链接：https://blog.youkuaiyun.com/brazen__/article/details/51167287

three.js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在three.js场景中应用DirectionalLight，并详细阐述如何配置renderer和mesh以创建逼真的阴影效果，让场景物体呈现出更加真实的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要使场景中物体有阴影先对renderer和mesh设置

renderer.shadowMap.enabled = true;
renderer.shadowMapType = THREE.PCFShadowMap; //阴影类型
THREE.BasicShadowMap = 0;   //默认
THREE.PCFShadowMap = 1;     //渐淡
THREE.PCFSoftShadowMap = 2; //渐淡柔化
BasicShadowMap 

PCFShadowMap 

PCFSoftShadowMap 
物体阴影设置
mesh.castShadow = true;     //显示自身阴影
mesh.receiveShadow = true;  //显示其他物体投射的阴影 material类型需为(MeshPhongMaterial或MehsLamberMtaerial)
DirectionalLight设置
var light = new THREE.DirectionalLight(0xf6e86d, 1);  //光照颜色 强度
light.castShadow = true;                              //显示阴影
//阴影暗度 尽量保持为1 可以通过调整环境光(THREE.AmbientLight)强度来改变阴影暗度light.shadowDarkness = 1;    
//阴影对应纹理的像素宽高   值越大 阴影越细致                        
light.shadowMapWidth = 500;light.shadowMapHeight = 500;
//光源位置
light.position.set(1000, 1500, 1000);
//光照投影锥形体的各个参数  其中left right top bottom 值越小阴影越细致 投影面积也越小
light.shadowCameraFar = 2500;
light.shadowCameraNear = 500;
light.shadowCameraLeft = -1000;light.shadowCameraRight = 1000;light.shadowCameraTop = 1000;light.shadowCameraBottom = -1000;
left=-200 right=200 top=200 bottom=-200  阴影
left=-1000 right=1000 top=1000 bottom=-1000 放大五倍 阴影
  
//light.shadowCameraVisible = true;  // 摄像机显示
scene.add(light);