tree.js 制作酷炫照片墙

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

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

时间: 2024-08-25 02:28:21

tree.js 制作酷炫照片墙的相关文章

Impress.js制作酷炫Presentation PPT

可以先看一个demo:http://dwqs.github.io/resume 昨天,我写了一些关于Impress.js的东西,对于创建在线的自我展示,这是一个非常不错的JavaScript库.由于是线上发布,所有有部分人问我怎么正确的使用它.因为没有在实际的项目页面设置帮助文档.这一篇文章将帮助你开始创建一个简单的幻灯片,但是之后你一定要完成它,可以用它来做很多酷炫的效果,唯一限制你的就是你的创造力. 需求 为了看到效果,请使用Google Chrome or Safari (or Firef

使用reveal.js制作酷炫的页面

几天前遇到一个制作3D幻灯片效果的插件,试着用到自己的在线简历页面中,展示效果蛮好的.不过查阅了很多文档,几乎都是英文,于是想着整理一下写一篇博客当总结. 准备工作: 1.首先当然是下载相应reveal的资源,下载链接:https://github.com/hakimel/reveal.js 2.将相应的文件夹(css.is.lib.plugin)引入到自己的工作目录,目录层次如下:(忽略我的imgs文件夹~~) 下面就可以着手写自己的页面啦~ <!doctype html> <html

站在巨人的肩膀上——制作酷炫web幻灯片

在线演示1 本地下载 你是否还在用ppt做一些毫无意思的幻灯片?你是否在做ppt的时候绞尽脑汁想把效果做的吸引大家?你是否想通过一次ppt吸引领导的注意?那好吧!来学学怎么制作一款炫酷的web幻灯片~ ps:如果看到这里还不感兴趣就请先看看素材演示,这个演示是前些时候给组里新人介绍HTML5的时候自己做的一款幻灯片!   工具 一款最近版本的chrome浏览器(火狐,safari也可) 一款趁手的IDE工具 impress.js君(您也可下载本页素材进行自己需求的修改) 优点 几乎不需要写任何J

Html + Css3 制作酷炫的导航栏

主要亮点: 1 ul 水平显示 2 li 去掉圆点 3 li中字体水平.竖直居中 4 li控制边框样式 5 使用html + css3 渐变画图 制作背景图片 6 更改颜色透明度 7 DIV制作边框阴影 先看效果图: 实现代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <!----编码-----> <meta nam

利用HTML canvas制作酷炫星星坠地粒子特效

去年在电影院看过的电影,印象最深刻的,算是电影<你的名字>了,而且被其中的画面深深吸引了,尤其是陨石划过天空的场景,太美啦!所以想着哪天做一个canvas的流星效果.最近刚好看到油管上的一个视频,作者的主页就是陨石坠落的粒子效果为背景,虽然没有<你的名字>中那么写实,但也是很漂亮了,效果大概长这样,附上链接https://codepen.io/christopher4lis/pen/PzONKR 在这个基础上,我做了一些修改,将圆形粒子换成五角星,背景星空无限右移,且随机产生流星.

PS如何制作酷炫个性字母人像海报

整体效果还是很棒棒哒,本人还是比较喜欢这种感觉,这里我们用(创意文字拼贴人物海报效果PS动作)来快速制作出这种效果,下面是一些效果: 01.打开软件,载入笔刷.动作直接双击可以载入或者编辑,预设,预设管理器载入笔刷和动作面板载入动作,关闭软件. 02.把软件切换成英文,我一般是直接改tw10428_Photoshop_zh_CN.dat文件名为Atw10428_Photoshop_zh_CN.dat,详细路径可以看一下图片. 03.打开软件,打开我们需要制作效果的图片,用钢笔工具等做出如下选区.

使用CSS3制作酷炫防苹果复选框 自行测试!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#eee; } .lbl{ /*复选框背景色*/ height:20px; width:50px; display:block;/*元素将显示为块级元素*/ ba

用canvas制作酷炫射击游戏--part3

今天介绍下 游戏中的sprite模块,也就是构建玩家及怪物的模块.有了这个模块,就可以在咱们的游戏里加入人物了. 想必用过css的朋友都知道sprite,一种将需要加载的图片拼接在一张图里以减少请求的css性能优化的方法.在游戏中的sprite,指游戏里有行为.有模样的对象.也就是人物或怪物. 源码见game-engine第598行.这里截取下目前需要的部分 加以说明. // 精灵构造器 var Sprite= function (name,context,painter,behaviors)

使用CSS3制作酷炫仿苹果複選框

1.CSS3 兄弟选择符(E~F) 2.CSS :after 选择器 3.神奇的css属性pointer-events 课程链接: http://www.gbtags.com/gb/gbliblist/136.htm