Three.js 添加阴影

最新推荐文章于 2025-05-14 11:41:59 发布

jyjin

最新推荐文章于 2025-05-14 11:41:59 发布

阅读量4.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：代码技术文章标签： threejs 阴影 shadow light castShadow

本文链接：https://blog.youkuaiyun.com/jianleking/article/details/54377736

代码技术专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了使用Three.js渲染阴影的四个步骤，包括如何设置渲染器、物体、光源及接收阴影的物体等关键技术参数，帮助读者快速掌握阴影效果的实现。

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

关键技术

shadowMapEnabled
castShadow
receiveShadow

引言

在three中渲染阴影需要耗费大量计算，所以默认情况下，渲染阴影的属性都是关闭，并不生成阴影。
如果需要为物体添加阴影的话，大体分为四步：

step1 :

告诉renderer我要渲染阴影

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(new THREE.Color(0xffffff));
renderer.shadowMapEnabled = true; // 启用阴影选项

step2:

让物体投射阴影

var geo = new THREE.BoxGeometry(10,10,10);
var mat = new THREE.MeshPhoneMaterial({color:0xffffff});
var cube = new THREE.Mesh(geo,mat);
cube.castShadow = true; // 启用阴影选项

step3:

让另外一个物体（平面或其他物体接受阴影）

var geo = new THREE.PlaneGeometry(100,50,32,32);
var mat = new THREE.MeshPhoneMaterial({color:0xeeeeee,side:THREE.DoubleSize});
var plane = new THREE.Mesh(geo,mat);
plane.receiveShadow = true; // 启用接受阴影选项

step4:

告诉光源需要投射阴影

var light = new THREE.DirectionalLight(color:0xffffff);
light.castShadow = true; // 启用阴影选项
scene.add(light);

注意：
用MeshPhoneMaterial是为了创建光亮的物体，MeshLambertMaterial创建会不光亮颜色暗淡模糊
完成以上四个步骤，即可完整的呈现阴影效果