DDR爱好者之家

WebGL three.js学习笔记之阴影与实现物体的动画效果
站长资源 2024/11/25 佚名
73 1538
DDR爱好者之家 Design By 杰米

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

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

 运行的结果如图：

WebGL three.js学习笔记之阴影与实现物体的动画效果

运行结果

 完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Three.js</title>
 <script src="/UploadFiles/2021-04-02/three.js">


其中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学习笔记之阴影与实现物体的动画效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米