使用three.js实现3D轮播效果

小咪咪 2022-12-26 08:16 194阅读 0赞

### 1、前言 ###

需求驱动技术研究：最近项目上要求3d效果居多，轮播效果我们以前一般用swiper就能实现，但是这次界面要求颇高，不得不研究一下three.js

### 2、学习历程 ###

1、找相关技术博客，未找到符合的

2、琢磨官网，花时间看了看官方文档的介绍，发现three.js的文档不是很通熟易懂

3、开始动手实现一些简单的元素、材质、简单位移动画

4、查找文档和博客一步步实现需求

### 3、代码 ###

github： [https://github.com/Promise-23/threeJs][https_github.com_Promise-23_threeJs]

代码写得比较乱，在此不贴代码了，有兴趣的可以down下来看下，功能基本实现但略显单薄

喜欢的可以帮忙点个start，感谢！

### 4、写在最后 ###

1、three.js的功能还是非常强大的，值得深入学习研究

2、数学功底略差，导致一个拉近功能完善不了，拉近角度一直控制不了，后续有思路再实现

3、下面感谢一些博主给的思路和指导！

[https://blog.csdn.net/qq\_30100043/article/details/80275413][https_blog.csdn.net_qq_30100043_article_details_80275413]

[https://blog.csdn.net/qq\_30100043/article/details/80114794][https_blog.csdn.net_qq_30100043_article_details_80114794]

[https://www.cnblogs.com/v-weiwang/p/6072235.html][https_www.cnblogs.com_v-weiwang_p_6072235.html]

[https://blog.csdn.net/mariosss/article/details/80665988][https_blog.csdn.net_mariosss_article_details_80665988]

[https://blog.csdn.net/ithanmang/article/details/84062933][https_blog.csdn.net_ithanmang_article_details_84062933]

[https://www.cnblogs.com/silent-stranger/p/6027266.html][https_www.cnblogs.com_silent-stranger_p_6027266.html]

[https_github.com_Promise-23_threeJs]: https://github.com/Promise-23/threeJs
[https_blog.csdn.net_qq_30100043_article_details_80275413]: https://blog.csdn.net/qq_30100043/article/details/80275413
[https_blog.csdn.net_qq_30100043_article_details_80114794]: https://blog.csdn.net/qq_30100043/article/details/80114794
[https_www.cnblogs.com_v-weiwang_p_6072235.html]: https://www.cnblogs.com/v-weiwang/p/6072235.html
[https_blog.csdn.net_mariosss_article_details_80665988]: https://blog.csdn.net/mariosss/article/details/80665988
[https_blog.csdn.net_ithanmang_article_details_84062933]: https://blog.csdn.net/ithanmang/article/details/84062933
[https_www.cnblogs.com_silent-stranger_p_6027266.html]: https://www.cnblogs.com/silent-stranger/p/6027266.html