版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianleking/article/details/54377736
关键技术
- 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创建会不光亮颜色暗淡模糊
完成以上四个步骤,即可完整的呈现阴影效果