tree.js 制作酷炫照片墙

Posted 2021-03-03 ransom

原创hangGe0111 最后发布于2019-03-28 16:10:35 阅读数 561 收藏
展开
1.tree.js 是一个用来 制作流畅效果，如果学习的比较深入的话，用来做 游戏 或者 动画片 都是可以的，是一个很不错的js插件；

2.使用教程参考

2.1  http://www.hewebgl.com/article/articledir/1  （比较推荐）

这是一个中文网站，资料也比较齐全

 

 

2.2  https://techbrood.com/threejs/docs/#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97/%E5%85%A5%E9%97%A8%E4%BB%8B%E7%BB%8D/%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%9C%BA%E6%99%AF(Scene)

 

2.3  https://threejs.org/

或者你也可以进这个网站，有好多比较酷炫的效果，可以先睹为快

 

2.4  https://threejs.org/examples/

2.5 https://threejs.org/docs/

3.有一些好看的效果，可以先睹为快

3.1 网上找的，php版

3.1.1 https://github.com/liuhill/i-Pper

3.1.2 效果  （有四种效果，通过底部四个按钮进行切换）

 

3.2  网上找的，node.js版 （和上边的是同一家的，好像）

3.2.1 https://github.com/liuhill/kper

3.3 网上找的 点击网址查看  https://github.com/Folgerjun/three.js-css3D

3.4 或者，在这个中文api网站，也能看到一些效果

http://www.hewebgl.com/article/getarticle/102

3.5 https://github.com/Folgerjun/three.js-css3D

3.7 https://wow.techbrood.com/fiddle/fork?id=37655

 

3.8 https://www.techbrood.com/?q=three+%E6%97%8B%E8%BD%AC

3.9 https://demo.demohuo.top/jquery/31/3149/demo/  (这里可以出现一直旋转的球，同时会弹出名片)

 

3.10  https://www.haolizi.net/example/view_15355.html  (3.10的效果和3.9的效果相同)

 

4.几点说明

(1)  一些案例链接来自不同网站，如果有对应需要可前往，不同网站获得；

(2) 3.10的效果估计用的比较多点，其实也是在官方demo的基础上，加了个计时器，在计时器的控制下，让他自由在 ‘表格’、‘球球’、‘螺旋’、‘格子’之间进行切换；

(3) 同时会给 scene 一个沿着某个轴(y轴就比较好，就相当于垂直的轴)的旋转自增的动作，就能让它自己动起来；

(4) 有些可能会涉及，页面头像是动态获得的，签到一个人，往里加一个人，这里的头像是一个数组，可以把初始化的动作封装为一个方法，在每次添加数据完成后，就执行一次初始化方法(盛放数据的变量，scene,camera,controls...都需要初始化，还有哪些计时器，否则计时器叠加之后，动画模式的切换和自己的旋转会越来越快)。在模式切换的那个地方的变量也应该保持当前值，添加完成后继续执行当前模式的动画即可；

(5) 对于需要动态加载的头像照片墙来说，每次添加一个新的照片，则每种状态的数据都须要重新计算一次，当不再请求数据，则不需要再重新计算了，所以此时就可以使用已存在的老数据了，可以将计算的部分封装为函数然后做一个判断数组长度的判断，如果数组长度发生了变化则计算，否则只是执行切换动作同时执行动画即可，这样的话对性能优化比较友好。
————————————————
版权声明：本文为CSDN博主「hangGe0111」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hangGe0111/java/article/details/88870776