Three.js 添加阴影

关键技术

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