tree.js 制作酷炫照片墙

2021-03-31 16:25

阅读:657

标签:计时   个人   art   query   否则   官方   添加   插件   切换   


原创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

tree.js 制作酷炫照片墙

标签:计时   个人   art   query   否则   官方   添加   插件   切换   

原文地址:https://www.cnblogs.com/ransom/p/12582226.html


评论


亲,登录后才可以留言!