yannkozon

网页设计新趋势：3D WebGL的运用" src="http://www.webjx.com/files/allimg/140102/2142483.jpg" width=610 height=308>

为了说明3D元素怎样结合到平时的静态页面中，Web设计师GUILLAUME LECOLLINET（他的网站：http://littleworkshop.fr）做了一个WebGL的demo页面。页面上呈现了3个东西：第一个HTML5盾牌，鼠标悬停会进行翻转；第二个框线球会有落下弹起的重力效果；第三个就是美元符号，会跟随鼠标悬停位置呈现不一样角度的阴影。从这个demo当中我们可以看到简单的3D效果完全可以让页面变得生动有趣。

glecollinet

(建议采用IE11或者Chrome查看）

试想一下，我们现在很多网页的Logo都是图片，但是如果带有一些3D的效果，一定会特别有意思。可能你会问，这能给用户带来多大价值呢？可能实用性上确实没有多少，但很多时候，我们也要讨用户欢心，让用户展现笑容，所谓的”delight”的作用，增加用户好感度。同时，这也可以展现一个网页的性格和技术的前瞻性，这方面是设计师和开发者需要好好考虑的。

那怎么在页面中运用3D元素呢？下面跟大家介绍三个好用的工具：

1. Three.js （http://threejs.org）

目前最好的WebGL library，也是浏览器支持最好最广泛的类库，IE11和Chrome对它的支持都很不错，上面介绍的案例都是运用ThreeJS创建的。

2. Blender （http://www.blender.org）

Blender是一个免费和开源的3D建模编辑应用，可以直接导出ThreeJS可用的代码。当然你也可以在其他3D建模工具如3DMax，然后导入到Blender从而生成ThreeJS可用的文件。

3. Voodoojs （http://www.voodoojs.com）

这是一个全新的JS library让你创建2D和3D有机融合的网页。

工具虽好，一个不可回避的问题还是浏览器的支持，虽然IE都已经开始支持WebGL了，但很多用户的浏览器可能还不支持。我建议开发者采用渐进式的支持方法，即给不同的浏览器不同的版本，以确保最先进的浏览器用户获得最好体验，而低版本浏览器用户也能获得良好的效果。以上介绍的网站均对不支持WebGL的浏览器做了适配，拿”月熊志”为例，这个网站的3D场景在不支持WebGL的浏览器变成了360度连续帧的png图片，也能让用户左右滑动来获得模拟3D效果。

3D对于网页来说不再是高不可攀的技术，有了浏览器的支持和各种JS库，相信2014年会有更多网站加入3D的元素来丰富用户体验，相信这也是未来网页发展的新方向。
作者：saber zou