tree.js 制作酷炫照片墙
2021-03-31 16:25
标签:计时 个人 art query 否则 官方 添加 插件 切换 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) 对于需要动态加载的头像照片墙来说,每次添加一个新的照片,则每种状态的数据都须要重新计算一次,当不再请求数据,则不需要再重新计算了,所以此时就可以使用已存在的老数据了,可以将计算的部分封装为函数然后做一个判断数组长度的判断,如果数组长度发生了变化则计算,否则只是执行切换动作同时执行动画即可,这样的话对性能优化比较友好。 tree.js 制作酷炫照片墙 标签:计时 个人 art query 否则 官方 添加 插件 切换 原文地址:https://www.cnblogs.com/ransom/p/12582226.html
原创hangGe0111 最后发布于2019-03-28 16:10:35 阅读数 561 收藏
展开
1.tree.js 是一个用来 制作流畅效果,如果学习的比较深入的话,用来做 游戏 或者 动画片 都是可以的,是一个很不错的js插件;
————————————————
版权声明:本文为CSDN博主「hangGe0111」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hangGe0111/java/article/details/88870776