月熊志

“月熊志”全新技术一览

整个“月熊志”官网是用HTML5和WebGL技术实现3D化。“月熊志”分为三个部分，以三本书的形式展现，书的翻页效果依靠了CSS Transitions 和 CSS Transforms，让用户在浏览网站的时候，就像翻阅杂志一样轻松。

AAF是一个公益组织，在过去的15年中其在拯救月熊方面做了非常多的努力。月熊是非常可爱的动物，有着非常丰富的故事。整个“月熊志”网站就是利用支持了WebGL与HTML5的IE11等浏览器的特性技术，通过构建一个3D的月熊生活场景，同时加入了高清图、视频和信息交互手段，并且可以触控流畅体验，把月熊Jasper的故事以一种更丰富、交互性更强的方式呈现给大家。

在网站的第一部分，使用3D的方式把Jasper及其生活场景栩栩如生的呈现在大家面前，通过IE11已经支持的WebGL技把月熊Jasper本身，以及它生活的场景渲染出来。网站通过 Blender 这个 3D 建模软件构建出了月熊的形象，以及他周围自然亲近的场景，然后结合 three.js 这个 JavaScript 3D 引擎，使得我们可以在浏览器中呈现这些模型和动画。 <了解更多>

本页创造了一个“视频拼图”的体验，我们可以把这九块零散的视频图拼成一块完整的视频，这样我们在趣味中了解Jasper的生活习性。网站在开发中使用了 Hammer.js，它支持微软自 Windows 8 和 IE10 以来引入的 Pointer API，Pointer API 封装了来自触摸、笔、鼠标的输入，能够对用户的触控操作进行统一的捕获和处理，帮助用户通过触控或者鼠标方式实现与Jasper的互动。 <了解更多>

利用最新的HTML5技术，“月熊志”网站能够把动态的视频作为背景画面，在这个动态的背景之上，再做出各种信息展示与动态交互。由于网站加入了类似视频等这样大量多媒体资源，需要预先加载，开发者通过使用PreloadJS技术，可以提前获取内容来提升浏览体验，结合 IE11 的预呈现和预提取的支持，可以让网站能更高效地加载后台资源。 <了解更多>

“月熊志”网站同样也采用丰富的媒体资源，网站根据Jasper不同的生活场景自动流畅切换各种背景声音，让我们能够更加身临其境地了解月熊的各种遭遇。IE11 的对 HTML5 的良好支持，让网站可以加入各种丰满的效果，另外，IE11 中全新的 F12 开发工作也帮助开发者在开发过程中更方便的进行网站的调试，让开发者可以清楚的了解到资源以及内存的占用情况以及模拟不同设备的显示效果。 <了解更多>

目前，月熊的生存环境正在变得恶劣，一些不法分子利用活熊取胆，许多月熊正在遭受苦难。如果我们不采取措施，月熊这种可爱的动物将继续遭受惨无人道的折磨。现在，已经有许多人已经加入到保护月熊的行列当中，其中包括了众多明星。他们录制了大量视频，亲身参与到月熊的保护中。如果你喜欢上了这些可爱的动物，那么也请加入到保护月熊的行列中。

我们希望通过这个网站给大家带来全新的数字内容呈现方式，但这种内容不仅仅局限于 AAF 这样的组织，其实他有很多的在线应用场景，比如说教育方面、产品呈现方面或是数字内容方面，都可以用这些形式。结合 3D 的元素，结合高清的视频，还有非常丰富的交互的方式，向受众提供不一样的体验。 <了解更多>