您现在的位置: 火星网 > 经验频道 > Photoshop > > 当H5遇到了3D,网站的魅力你驾驭不住!
  • 当H5遇到了3D,网站的魅力你驾驭不住!
  • 使用软件: Photoshop illustrator After Effects 点击: 3616
  • 选择: \ \
  • 发布时间:2016-09-16
  • 免责声明:火星网文章来源于作者原创或整理自互联网,仅为提供更多信息,不代表火星时代同意其观点或描述,版权归原作者所有,如需转载,请联系原作者并注明出处,如涉及作品内容、版权或其他问题,请及时与我们联系,我们将在第一时间予以更改或删除,感谢您的理解和包容!

       


一说到3D效果,大家首先联想到的可能是电影、动画或者是现如今各类的游戏内容,然而3D的概念已经不仅仅局限在这些领域了,就像如今我们上网所使用的网页在HTML5和CSS3的支持下,也开始变着花样玩起了3D效果,无论是图片、绘画、游戏还是物理效果的演示,都能在小小的网页中以极具视觉冲击的3D效果呈现在的我们的面前。



上面这张gif图片只是HTML5的一个最为简单的3D效果演示,而接下来为大家介绍的内容则更加有趣,甚至远远超出你对一个普通网页的理解范畴!


Sketching in 3D


想必大家以前都看过下面这样的艺术作品,当它旋转的时候,不同的角度会呈现不同的画面。



而这个叫做Sketching in 3D的绘画应用,同样可以实现这样的效果,前提是你的美术造诣要足够高。它基于HTML5技术,当你随意画一些东西后,按住空格键然后左右拖动鼠标,你会发现你的画开始旋转,拥有了3D透视的效果。



Sketching in 3D还为我们提供了几个简单的设置内容,比如画笔的粗细,以及画笔的颜色都可以调整。



同时你也可以让所有的线条都抖动起来,幅度可调,但不知道究竟有什么用......



此外,你还可以保存自己独一无二的作品,然后以视频的方式通过各种社交应用分享给你的朋友。


3D Image


如何将一张图片做出3D的效果,3D Image给出了一个非常有趣的答案。它是一款非常酷的HTML5 3D图片旋转动画,是基于Js的动画框架TweenMax而制作的。当你在图片上面拖动鼠标,图片会在垂直方向分裂出数块小长方体,然后每一个小长方体会沿着鼠标拖动的方向旋转。



Ben Joffe & Cubeout


在游戏方面HTML5同样有着令人称道的3D效果,比如《Ben Joffe》和《Cubeout》这两款俄罗斯方块游戏,就将2D的玩法变成了3D的模样。


在《Ben Joffe》中,游戏不再是一个平面,而是一个立体的环形结构,玩家可以通过键盘的左右方向键进行旋转,通过上键改变方块角度,下键让方块快速落下。



而《Cubeout》虽然也是一款3D的俄罗斯方块游戏,但是却使用了俯视的视角。整个游戏难度瞬间提升了很多,你可以使用键盘的方向键控制方块的移动,使用WASD键变换方块的角度,然后空格键让方块快速落下。



Three Dreams of Black


这个之前给大家介绍过,但既然是展示HTML5的3D效果,就不得不再次说一下这个如梦似幻的网页应用。它利用HTML5技术为我们创建了一个可以互动的3D世界,将乐队组合Danger Mouse & Daniele Luppi的专辑歌曲再度升华。


《Three Dreams of Black》


在这里,所有的景物都会随着音乐不断变化,并且在你移动鼠标的时候,整个场景都会随之摆动,偶尔还可以控制一些动物的行动。整个网页内容给人的体验就是,你不单单听了一首歌,而且好像亲身经历了这首歌所蕴含的一切,感觉就像一款VR作品那样真实。


WebGL Water


最后要介绍的WebGL Water可以说是一个非常逆天的存在,虽然它只是一个基于浏览器的功能演示网页,但是它蕴含的技术却是革命性的。在演示中,你可以点击水面让它掀起层层涟漪,或者拖动鼠标改变球体的位置,同时也可以变换球体的重力和浮力。球体和水能够产生实时的互动,模拟出了一个真实的物理环境。



此外,你可以按空格键,让整个环境静止,观察水面的波纹细节,甚至在水面刻画纹路,但同时球体仍可以随时移动。原本这种物理模拟演示一般只能在特定的引擎程序中才能运行,但是WebGL Water却通过HTML5和CSS3等技术将它放在了普通的网页上,3D效果堪称逆天!


《WebGL Water》


(注:本文已获得授权,作者:坚果,版权归原作者所有,如需转载,请联系微信公众号:快创互娱KCHYPT,感谢!)

分享是一种态度 一句中肯的评价可能改变一个行业 一次用心的分享可能改变他人的一生
你的态度和观点将让我们的行业更强大

匿名用户

按Ctrl+Enter发送消息