一个牛逼网站的精彩背后

洋葱头大 发布于 2013/12/11 16:22
阅读 3K+
收藏 62

挖到一个值得学习的网站:http://moonbear.animalsasia.org/ie/

对于传统的网站来讲,这是一个神奇的网站!呵呵,,你在浏览整个体验的过程当中,就像翻阅一本杂志一样轻松,我把这个网站开发背后的技术精华罗列出来,和大家分享讨论!

网站中的翻页依靠了 CSS Transitions 和 CSS Transforms,但这又不是一本传统的电子杂志,在杂志中加入了非常丰富的 3D 元素、高清图、视频和信息交互方式,并且可以触控流畅体验。

现在触控设备越来越多,为了响应触控,开发团队在开发中使用了 Hammer.js,这个大小仅为 3KB 的 JS 库,不仅支持常见的鼠标事件,还支持微软自 Windows 8 和 IE10 以来引入的 Pointer API,Pointer API 封装了来自触摸、笔、鼠标的输入,能够对用户的触控操作进行统一的捕获和处理,不论用户使用什么样的输入硬件,都能很好的工作。这样可以更容易的去处理例如 Tap,Swipe,Drag 这些触控的操作,满足来自触控设备用户的流畅体验。另外在网站中很多内容也专门制作了丰富的触控交互场景,需要用户进行一些触控的操作,了解更多的内容。

以下是代码示例:


<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>

 

<script>

 

// 先要对监听的DOM进行一些初始化

var hammer = newHammer(document.getElementById("container"));

 

// 然后加入相应的回调函数即可

hammer.ondragstart = function (ev) {}; // 开始拖动

hammer.ondrag = function (ev) {}; // 拖动中

hammer.ondragend = function (ev) {}; // 拖动结束

hammer.onswipe = function (ev) {}; // 滑动

 

hammer.ontap = function (ev) {}; // 单击

hammer.ondoubletap = function (ev) {}; //双击

hammer.onhold = function (ev) {}; // 长按

 

hammer.ontransformstart = function (ev) {}; // 双指收张开始

hammer.ontransform = function (ev) {}; // 双指收张中

hammer.ontransformend = function (ev) {}; // 双指收张结束

 

hammer.onrelease = function (ev) {}; // 手指离开屏幕

 

</script>

在网站的第一部分使用 3D 的方式把 Jasper 栩栩如生的呈现出来,大家可以和他进行交互,并且 Jasper 也会有非常丰富的动作。开发团队希望构建出的 3D 的场景可以把月熊生长的环境以及氛围更好的渲染出来,为了更好的展示这些体验,通过 WebGL 把 Jasper 搬到浏览器上,让大家了解这种充满情感的动物。加上一些与 Jasper 的交互,让我们能沉浸其中,并且了解月熊的一些特点。

通过 Blender 这个 3D 建模软件构建出了月熊的形象,以及他周围自然亲近的场景,然后结合 three.js 这个 JavaScript 3D 引擎,使得我们可以在浏览器中呈现这些模型和动画。由于从 Blender 中导出的这些 3D 模型的文件体积都比较大,通过网络去传输用户就需要花费很长的时间去加载,为了保证更为流畅的体验,不得不深入研究 Blender 以及 three.js,来想办法去减小文件的体积,以及在浏览器上的响应速度,得益于 IE11 的硬件加速以及 WebGL 的高效,可以给我们带来可以在浏览器上运行场景丰富,动画流畅的 3D 体验。

以下是与 WebGL 相关的代码示例:


loader.load("models/mesh.js", function (geometry, materials) {

 

    //创建模型对象

    var mesh = new THREE.MorphAnimMesh(geometry, new THREE.MeshFaceMaterial(materials));

 

    //设置动画区间

    mesh.mirroredLoop = true;

    mesh.setFrameRange(0, 290);

    mesh.duration = 290 * 24 / 1000;

 

    //设置位置和大小

    mesh.position.z = 2000;

    mesh.position.y = -1500;

    mesh.scale.x = mesh.scale.y = mesh.scale.z = 500;

 

    //设置阴影

    mesh.castShadow = true;

    mesh.receiveShadow = true;

   

    //添加到场景

    scene.add(mesh);

 

    //平行光

    var directionalLight = new THREE.DirectionalLight(0xffffff, .6);

    directionalLight.position.set(6000, 10000, 7000);

    directionalLight.castShadow = true;

    directionalLight.shadowCameraNear = 500;

    directionalLight.shadowCameraFar = 30000;

    directionalLight.shadowCameraLeft = -10000;

    directionalLight.shadowCameraRight = 10000;

    directionalLight.shadowCameraTop = 10000;

    directionalLight.shadowCameraBottom = -10000;

    directionalLight.shadowDarkness = .2;

    directionalLight.shadowMapWidth = 2048;

    directionalLight.shadowMapHeight = 2048;

    scene.add(directionalLight);

 

    //半球光

    var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, .7);

    scene.add(hemiLight);

 

});

加载中
0
amonxu
amonxu
很不错!
0
W
Wolfei
HTML5 ,看来可以学习下了
0
eechen
eechen
IE11也开始支持WebGL了呀,以前不是说因为“安全”问题不支持WebGL吗,这不打脸自抽吗?

eechen
eechen
回复 @洋葱头大 : 最怕就是IE用了WebGL之后又搞出一些自己独有的API,搞差异化.WebGL当然强大,可以看看Mozilla的这个WebGL游戏Demo: https://developer.mozilla.org/en-US/demos/detail/bananabread
洋葱头大
洋葱头大
可能安全问题解决了就支持了,我觉得这问题也不大.....毕竟WEBGL技术还是很强大的。比如IE11支持WEBGL就可以使用显卡的硬件驱动为网页来提供特效了,包括3D旋转等等。。不用我说,你懂的。哈哈......
0
子木007
子木007
翻到第二页把我大 chrome 整奔溃了
笑一笑
笑一笑
@蟋蟀哥哥 我三年前的电脑带着Chrome来访问, 也还是可以的嘛.
fantasylgd
fantasylgd
回复 @蟋蟀哥哥 : 还没开始翻书呢 就崩溃了 firefox
eechen
eechen
这网站页尾就写着"IE合作"之类的英文字眼,你非用Chrome,还有什么好说的呢.
大鹦鹉
大鹦鹉
这估计是脚本库的问题,CHROME的脚本兼容性不是特别好这也不是没可能,说实话,毕竟是IE开发的网站,它那体验最好也无可厚非了...
蟋蟀哥哥
蟋蟀哥哥
这就是为啥哥喜欢用firefox
下一页
0
陈舵主
陈舵主
对于传统的网站来讲,这是一个很慢的网站,,,在公司网速的前提下,别的网站打开秒杀,这个网站是蜗牛
陈舵主
陈舵主
回复 @洋葱头大 : 恩,明白,嘿嘿
洋葱头大
洋葱头大
哈哈。。这个根本的原因是因为图片和脚本比较多,第一次加载的时候确实会慢,如果第二次打开,就会快很多.
0
-Jw-
-Jw-
很不错 满分赞一个 唯一缺点 就是 在大陆的网速下载入太久了
0
CodeSu
CodeSu
好看, 舒服
0
周星_1980
周星_1980
网页游戏要这效果就好了
0
洋葱头大
洋葱头大
http://v.youku.com/v_show/id_XNjQyODI0OTU2=.html这个视频里开发团队非常详细的介绍了背后的故事,对搞开发和设计的人来说,应该还是很有借鉴意义。http://moonbear.animalsasia.org/ie/
0
帖子列表
帖子列表
加载的花儿也谢了 
洋葱头大
洋葱头大
哈哈哈。。再开一次!~
返回顶部
顶部