符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
小编给大家分享一下利用Three.js实现阴影效果的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司自2013年起,是专业互联网技术服务公司,拥有项目成都做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元彝良做网站,已为上家服务,为彝良各地企业和个人服务,联系电话:18980820575
先上效果图:
实现这个效果其实很简单,只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节:
(1)首先需要告诉渲染器我需要阴影,你给我生成阴影:
renderer.shadowMap.enabled = true;
(2)然后告诉灯光,我需要阴影:
light.castShadow = true;
(3)告诉模型哪些需要投射阴影:
//告诉球需要投射阴影 sphere.castShadow = true; //告诉立方体需要投射阴影 cube.castShadow = true;
(4)最后告诉最底下的平面长方形你要接受阴影:
plane.receiveShadow = true;
上面四步只要设置好了,就可以实现阴影的效果了。
注意事项:你的模型的材质一定要选择对灯光有反应的材质,要不然不会出现效果,就是因为这个问题导致好长时间没有整出来阴影。
案例全部代码:
Title
看完了这篇文章,相信你对“利用Three.js实现阴影效果的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!