火星网校
当H5遇到了3D，网站的魅力你驾驭不住！
发布时间：2018-11-17 19:57:24
一说到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的专辑歌曲再度升华。
[flash]http://static.video.qq.com/TPout.swf?vid=i03232j6464&auto=0[/flash]
《Three Dreams of Black》
在这里，所有的景物都会随着音乐不断变化，并且在你移动鼠标的时候，整个场景都会随之摆动，偶尔还可以控制一些动物的行动。整个网页内容给人的体验就是，你不单单听了一首歌，而且好像亲身经历了这首歌所蕴含的一切，感觉就像一款VR作品那样真实。
WebGL Water
最后要介绍的WebGL Water可以说是一个非常逆天的存在，虽然它只是一个基于浏览器的功能演示网页，但是它蕴含的技术却是革命性的。在演示中，你可以点击水面让它掀起层层涟漪，或者拖动鼠标改变球体的位置，同时也可以变换球体的重力和浮力。球体和水能够产生实时的互动，模拟出了一个真实的物理环境。
此外，你可以按空格键，让整个环境静止，观察水面的波纹细节，甚至在水面刻画纹路，但同时球体仍可以随时移动。原本这种物理模拟演示一般只能在特定的引擎程序中才能运行，但是WebGL Water却通过HTML5和CSS3等技术将它放在了普通的网页上，3D效果堪称逆天！
[flash]http://static.video.qq.com/TPout.swf?vid=h03268rj7h7&auto=0[/flash]
《WebGL Water》
（注：本文已获得授权，作者：坚果，版权归原作者所有，如需转载，请联系微信公众号：快创互娱KCHYPT，感谢！）
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
想学习UI设计，却不知道哪里的培训机构比较好？本文推荐一家专业的UI设计培训机构，助你快速掌握技能。
-
想学习平面设计却不知道该去哪里？本文为您介绍学习平面设计的好去处。
-
想学习VR软件开发但不知道选择哪家？本文为您介绍如何选择学VR软件开发的最佳选择。
-
想学习后期动画制作技巧？本文详细介绍火星影视后期动画培训，助您成为后期动画专家！
-
专业的影视美术提升培训机构为学员提供全方位的影视美术技能培训，助力学员在影视美术领域取得成功。
-
想要学习交互设计却不知道从哪里入手？本文为您提供选择最佳学习路径的指南，助您顺利成为交互设计师。
