Three.js 添加阴影

来源：互联网发布：唯一网络王宇杰简介编辑：程序博客网时间：2024/05/01 03:10

关键技术

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创建会不光亮颜色暗淡模糊
完成以上四个步骤，即可完整的呈现阴影效果

1 0