先上效果图：
实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节：
（1）首先需要告诉渲染器我需要阴影，你给我生成阴影：
renderer.shadowmap.enabled = true;
（2）然后告诉灯光，我需要阴影：
light.castshadow = true;
（3）告诉模型哪些需要投射阴影：
//告诉球需要投射阴影 sphere.castshadow = true; //告诉立方体需要投射阴影 cube.castshadow = true;
（4）最后告诉最底下的平面长方形你要接受阴影：
plane.receiveshadow = true;
上面四步只要设置好了，就可以实现阴影的效果了。
注意事项：你的模型的材质一定要选择对灯光有反应的材质，要不然不会出现效果，就是因为这个问题导致好长时间没有整出来阴影。
案例全部代码：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </style> </head> <body onload="draw();"> </body> <script src="build/three.js"></script> <script src="examples/js/controls/trackballcontrols.js"></script> <script src="examples/js/libs/stats.min.js"></script> <script> var renderer; function initrender() { renderer = new three.webglrenderer({antialias:true}); renderer.setsize(window.innerwidth, window.innerheight); //告诉渲染器需要阴影效果 renderer.shadowmap.enabled = true; renderer.shadowmap.type = three.pcfsoftshadowmap; // 默认的是，没有设置的这个清晰 three.pcfshadowmap document.body.appendchild(renderer.domelement); } var camera; function initcamera() { camera = new three.perspectivecamera(45, window.innerwidth/window.innerheight, 0.1, 1000); camera.position.set(0, 40, 100); camera.lookat(new three.vector3(0,0,0)); } var scene; function initscene() { scene = new three.scene(); } var light; function initlight() { scene.add(new three.ambientlight(0x444444)); light = new three.spotlight(0xffffff); light.position.set(60,30,0); //告诉平行光需要开启阴影投射 light.castshadow = true; scene.add(light); } function initmodel() { //上面的球 var spheregeometry = new three.spheregeometry(5,20,20); var spherematerial = new three.meshstandardmaterial({color:0x7777ff}); var sphere = new three.mesh(spheregeometry, spherematerial); sphere.position.y = 5; //告诉球需要投射阴影 sphere.castshadow = true; scene.add(sphere); //辅助工具 var helper = new three.axishelper(10); scene.add(helper); //立方体 var cubegeometry = new three.cubegeometry(10,10,8); var cubematerial = new three.meshlambertmaterial({color:0x00ffff}); var cube = new three.mesh(cubegeometry, cubematerial); cube.position.x = 25; cube.position.y = 5; cube.position.z = -5; //告诉立方体需要投射阴影 cube.castshadow = true; scene.add(cube); //底部平面 var planegeometry = new three.planegeometry(100,100); var planematerial = new three.meshstandardmaterial({color:0xaaaaaa}); var plane = new three.mesh(planegeometry, planematerial); plane.rotation.x = - 0.5 * math.pi; plane.position.y = -0; //告诉底部平面需要接收阴影 plane.receiveshadow = true; scene.add(plane); } //初始化性能插件 var stats; function initstats() { stats = new stats(); document.body.appendchild(stats.dom); } //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 var controls; function initcontrols() { controls = new three.trackballcontrols( camera ); //旋转速度 controls.rotatespeed = 5; //变焦速度 controls.zoomspeed = 3; //平移速度 controls.panspeed = 0.8; //是否不变焦 controls.nozoom = false; //是否不平移 controls.nopan = false; //是否开启移动惯性 controls.staticmoving = false; //动态阻尼系数 就是灵敏度 controls.dynamicdampingfactor = 0.3; //未知，占时先保留 //controls.keys = [ 65, 83, 68 ]; controls.addeventlistener( 'change', render ); } function render() { renderer.render( scene, camera ); } //窗口变动触发的函数 function onwindowresize() { camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); controls.handleresize(); render(); renderer.setsize( window.innerwidth, window.innerheight ); } function animate() { //更新控制器 render(); //更新性能插件 stats.update(); controls.update(); requestanimationframe(animate); } function draw() { initrender(); initscene(); initcamera(); initlight(); initmodel(); initcontrols(); initstats(); animate(); window.onresize = onwindowresize; } </script> </html>
相关推荐：
css3的文本阴影text-shadow属性应该如何使用
html5、css实现文字阴影效果实例分享
总结6个css3阴影使用方法介绍
以上就是three.js实现阴影效果代码的详细内容。