小编给大家分享一下利用Three.js实现阴影效果的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
先上效果图:
实现这个效果其实很简单,只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节:
(1)首先需要告诉渲染器我需要阴影,你给我生成阴影:
renderer.shadowMap.enabled=true;
(2)然后告诉灯光,我需要阴影:
light.castShadow=true;
(3)告诉模型哪些需要投射阴影:
//告诉球需要投射阴影 sphere.castShadow=true; //告诉立方体需要投射阴影 cube.castShadow=true;
(4)最后告诉最底下的平面长方形你要接受阴影:
plane.receiveShadow=true;
上面四步只要设置好了,就可以实现阴影的效果了。
注意事项:你的模型的材质一定要选择对灯光有反应的材质,要不然不会出现效果,就是因为这个问题导致好长时间没有整出来阴影。
案例全部代码:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> <styletype="text/css"> html,body{ margin:0; height:100%; } canvas{ display:block; } </style> </head> <bodyonload="draw();"> </body> <scriptsrc="build/three.js"></script> <scriptsrc="examples/js/controls/TrackballControls.js"></script> <scriptsrc="examples/js/libs/stats.min.js"></script> <script> varrenderer; functioninitRender(){ renderer=newTHREE.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); } varcamera; functioninitCamera(){ camera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); camera.position.set(0,40,100); camera.lookAt(newTHREE.Vector3(0,0,0)); } varscene; functioninitScene(){ scene=newTHREE.Scene(); } varlight; functioninitLight(){ scene.add(newTHREE.AmbientLight(0x444444)); light=newTHREE.SpotLight(0xffffff); light.position.set(60,30,0); //告诉平行光需要开启阴影投射 light.castShadow=true; scene.add(light); } functioninitModel(){ //上面的球 varsphereGeometry=newTHREE.SphereGeometry(5,20,20); varsphereMaterial=newTHREE.MeshStandardMaterial({color:0x7777ff}); varsphere=newTHREE.Mesh(sphereGeometry,sphereMaterial); sphere.position.y=5; //告诉球需要投射阴影 sphere.castShadow=true; scene.add(sphere); //辅助工具 varhelper=newTHREE.AxisHelper(10); scene.add(helper); //立方体 varcubeGeometry=newTHREE.CubeGeometry(10,10,8); varcubeMaterial=newTHREE.MeshLambertMaterial({color:0x00ffff}); varcube=newTHREE.Mesh(cubeGeometry,cubeMaterial); cube.position.x=25; cube.position.y=5; cube.position.z=-5; //告诉立方体需要投射阴影 cube.castShadow=true; scene.add(cube); //底部平面 varplaneGeometry=newTHREE.PlaneGeometry(100,100); varplaneMaterial=newTHREE.MeshStandardMaterial({color:0xaaaaaa}); varplane=newTHREE.Mesh(planeGeometry,planeMaterial); plane.rotation.x=-0.5*Math.PI; plane.position.y=-0; //告诉底部平面需要接收阴影 plane.receiveShadow=true; scene.add(plane); } //初始化性能插件 varstats; functioninitStats(){ stats=newStats(); document.body.appendChild(stats.dom); } //用户交互插件鼠标左键按住旋转,右键按住平移,滚轮缩放 varcontrols; functioninitControls(){ controls=newTHREE.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); } functionrender(){ renderer.render(scene,camera); } //窗口变动触发的函数 functiononWindowResize(){ camera.aspect=window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); controls.handleResize(); render(); renderer.setSize(window.innerWidth,window.innerHeight); } functionanimate(){ //更新控制器 render(); //更新性能插件 stats.update(); controls.update(); requestAnimationFrame(animate); } functiondraw(){ initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); animate(); window.onresize=onWindowResize; } </script> </html>
看完了这篇文章,相信你对“利用Three.js实现阴影效果的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!
海报
0 条评论
186
本站已关闭游客评论,请登录或者注册后再评论吧~