平武建站

WebGL中three.js怎么实现物体的阴影动画效果-创新互联

小编给大家分享一下WebGL中three.js怎么实现物体的阴影动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

实现物体的旋转、跳动以及场景阴影的开启与优化

本程序将创建一个场景，并实现物体的动画效果

 运行的结果如图：

WebGL中three.js怎么实现物体的阴影动画效果

运行结果

 完整代码如下：




 
 Three.js
 
 
 
 
 
 
 div#canvas-frame {
 border: none;
 cursor: pointer;
 width: 100%;
 height: 850px;
 background-color: #333333;
 }
 

其中OrbitControls.js和dat.gui.min.js这两个文件都是Three.js自带的两个很好用的工具，第一个是可以让摄像机有轨道地进行移动，而不用再自己写函数去实现，第二个是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件，方便我们测试程序。

另外如果想要在程序中开启阴影的话首先需要把renderer.shadowMapEnabled设置为true，默认是关闭的，因为实现阴影的效果是比较消耗性能的。同时要把light的投掷阴影开启light.castShadow = true，但是并不是所有的灯光都可以开启，比如环境光就不可以。每一个需要产生阴影的物体也要开启阴影，我们需要用地面来接收阴影，所以也需要开启地面的接收

WebGL中three.js怎么实现物体的阴影动画效果

plane.receiveShadow = true；
cube.castShadow = true;
 sphere.castShadow = true;

现在的效果是这样的：

WebGL中three.js怎么实现物体的阴影动画效果

 可以看到，阴影是比较难看的，所以设置一些阴影的类型，PCFSoftShadowMap能让边缘柔和，但只是基于像素颗粒的边缘柔和。我们可以先使用此类型，然后再提高阴影的分辨率

light.shadowMapWidth = 8192;
 light.shadowMapHeight = 8192;

默认的值应该是1024。

 此时的阴影效果是这样的

优化后阴影

 至此，我们的场景还有物体的动画效果就已经实现。

以上是“WebGL中three.js怎么实现物体的阴影动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


当前文章：WebGL中three.js怎么实现物体的阴影动画效果-创新互联
本文路径：http://pwwzsj.com/article/hcgje.html

其他资讯