h5视觉炸裂指南

发送到手机
使用"扫一扫"即可发送至手机

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


005uIfSOjw1f7jm9sc885g30c606ckfu.gif


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

Sketching in 3D

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

005uIfSOjw1f7jma6e352g307n0a5kja.gif

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


005uIfSOjw1f7jmapkytyg30ak071ahh.gif


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


005uIfSOjw1f7jmb3du0ng30ak0711jy.gif


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


005uIfSOjw1f7jmbdqfrdg30ak0714ms.gif


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

3D Image

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

005uIfSOjw1f7jmbr3j3bg307009he81.gif

Ben Joffe & Cubeout

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

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

005uIfSOjw1f7jmc4a29gg307x08hu0x.gif

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


 005uIfSOjw1f7jmdaonw2g30b80bani0.gif

Three Dreams of Black

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

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

WebGL Water

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

005uIfSOjw1f7jmeed12rg308m07qu0x.gif

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

h5视觉炸裂指南

h5视觉炸裂指南

分享:

标签: