利用Three.js实现阴影效果的方法

小编给大家分享一下利用Three.js实现阴影效果的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

成都创新互联公司自2013年起,是专业互联网技术服务公司,拥有项目成都做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元彝良做网站,已为上家服务,为彝良各地企业和个人服务,联系电话:18980820575

先上效果图:

利用Three.js实现阴影效果的方法

实现这个效果其实很简单,只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节:

(1)首先需要告诉渲染器我需要阴影,你给我生成阴影:

renderer.shadowMap.enabled = true;

(2)然后告诉灯光,我需要阴影:

light.castShadow = true;

(3)告诉模型哪些需要投射阴影:

//告诉球需要投射阴影 
 sphere.castShadow = true; 
//告诉立方体需要投射阴影 
 cube.castShadow = true;

(4)最后告诉最底下的平面长方形你要接受阴影:

plane.receiveShadow = true;

上面四步只要设置好了,就可以实现阴影的效果了。

注意事项:你的模型的材质一定要选择对灯光有反应的材质,要不然不会出现效果,就是因为这个问题导致好长时间没有整出来阴影。

案例全部代码:

 
 
 
  
 Title 
  
 html, body { 
  margin: 0; 
  height: 100%; 
 } 
 
 canvas { 
  display: block; 
 } 
 
  
 
 
 
 
 
 
 
 

看完了这篇文章,相信你对“利用Three.js实现阴影效果的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


本文名称:利用Three.js实现阴影效果的方法
文章位置:http://scyanting.com/article/gipeoo.html