序

众所周知，作为webgl的插件，three.js绝对不像原生的webgl那么费力。所以经过一个小时的研究(笨人不聪明，已经是极限速度了)。最后做了阴影效果，发现了一些错误。话不多说，我们来看看详细的介绍。

首先，效果图：

要达到这个效果其实很简单，只需要设置几个属性就可以达到当前的效果。我将把上面的材料问题放到下一部分：

(1)首先需要告诉渲染器我需要阴影，你为我生成阴影：

renderer . shadow map . enabled=true；(2)然后告诉灯光我需要阴影：

light.castShadow=true(3)告诉模型哪些需要投射阴影：

//告诉球需要投阴影球，sphere.castShadow=true//告诉cube投射阴影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；高度： 100%;}画布{显示：块；}/style/head body on load=' draw()；'/body script src=' http : build/三。js '/script script src=' http : examples/js/controls/trackbolcontrols。js '/script script src=' http : examples/js/libs/stats。量滴js '/脚本脚本变量渲染器；函数initRender() { renderer=new THREE .WebGLRenderer({ anti IAS : true })；渲染器。setsize(窗口。内部宽度，窗户。内部高度)；//告诉渲染器需要阴影效果渲染器。影子地图。enabled=true渲染器.阴影贴图.类型=三.pcfsofshadowmap//默认的是，没有设置的这个清晰三个PCFShadowMap文档。尸体。appendchild(渲染器。圆顶元件)；} var相机；函数initCamera() { camera=new THREE .透视相机(45，window . inner width/window . inner height，0.1，1000)；camera.position.set(0，40，100)；相机。看（新的三Vector3(0，0，0))；} var场景；函数initScene() { scene=new THREE .场景();}不同的光线函数initLight() { scene.add(new THREE .环境光(0x 444444))；光=新的三.聚光灯(0x ffffff)；light.position.set(60，30，0)；//告诉平行光需要开启阴影投射light.castShadow=true场景添加（光);}函数initModel() { //上面的球var球面测量=新三.球面测量法(5,20,20);var球形材料=新三.网状标准材料({ color :0 x 7777 ff })；var sphere=new THREE .网格（球面测量，球面材料);球体。位置。y=5；//告诉球需要投射阴影sphere . castshadow=true scene . add(球体);//辅助工具var helper=new THREE .轴帮助器(10);场景。添加(助手)；//立方体向量几何=新三.立方体几何(10,10,8);var cubeMaterial=new THREE .MeshLambertMaterial({ color :0x 00 ffff })；var cube=new THREE .网格（立方体几何，立方体材质);立方体。位置。x=25立方体。位置。y=5；立方体。位置。z=-5；//告诉立方体需要投射阴影cube.castShadow=truescene.add(立方体);//底部平面变量平面几何=新三。平面几何(100,100);var planeMaterial=new THREE .网状标准材料({ color :0 xa aa })；var plane=new THREE .网格（平面几何，平面材料);平面.旋转. x=- 0.5 *数学.PI；飞机。位置。y=-0；//告诉底部平面需要接收阴影plane.receiveShadow=true场景添加（平面);} //初始化性能插件定义变量统计；函数initStats(){ Stats=new Stats()；文件。尸体。appendchild(统计数据。DOM)；} //用户交互插件鼠标左键按住旋转，右键按住平移，滚轮缩放风险值控制。函数init controls(){ controls=new THREE .跟踪球控制器（摄像机);//旋转速度控件。rotatespeed=5；//变焦速度控件。zoom speed=3；//平移速度controls.panSpeed=0.8//是否不变焦controls.noZoom=false//是否不平移controls.noPan=false//是否开启移动惯性controls . static moveing=false//动态阻尼系数就是灵敏度控件。dynamicdampingfactor=0.3//未知，占时先保留//controls.keys=[ 65，83，68]；控件。addeventlistener(' change '，render)；}函数render(){ render。渲染(场景、相机);} //窗口变动触发的函数函数onWindowResize(){相机。aspect=窗口。内部宽度/窗口。内部高度；照相机。updateprojectionmatrix()；控件。handleresize()；render()；渲染器。setsize(窗口。内部宽度，窗户。内部高度)；}函数animate() { //更新控制器render()；//更新性能插件统计数据。update()；控件。update()；requestAnimationFrame(动画);}函数draw(){ initRender()；init scene()；initCamera()；init light()；init model()；init控件()；initStats()；animate()；窗户。onresize=OnWindowResize}/脚本/html总结

以上就是本文的全部内容。希望本文的内容对大家学习或者使用Three.js有一定的参考价值，有问题可以留言交流。谢谢你的支持。