famo.us 3D游戏引擎初探

最新推荐文章于 2024-04-26 09:46:32 发布

徐文志程序猿

最新推荐文章于 2024-04-26 09:46:32 发布

阅读量2.3k

点赞数

分类专栏：前端Js-jQuery-Ajax PhoneGap App 框架

本文链接：https://blog.csdn.net/u014646984/article/details/32923211

版权

前端Js-jQuery-Ajax 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

框架

11 篇文章 0 订阅

订阅专栏

App

10 篇文章 0 订阅

订阅专栏

好久之前就看到了famo.us的优良特性，尤其是它避开浏览器弊病的跳跃思维，再加上自己使用JQM来开发Web App时的页面切换的白屏bug，又比对了sencha touch，最后还是决定将famo.us作为开发框架，它是基于浏览器的，目标就是使页面呈现性能最大化，而我不会拿它来做游戏，只是做简单的WebApp，要的就是这个界面显示性能。

但悲剧的是国内没有关于famo.us的教程，近些日子Google被天朝打压的挺惨，幸运的是famo.us官网还是可以访问的，所以以下的学习结果都来自官网http://www.famo.us/，并且famo.us针对开发者是免费开源的，所以不用担心费用问题。

famo.us的基本信息

famo.us不同于以往的HTML，是通过Javascript来驱动进行页面的渲染和切换，HTML的页面结构是通过DOM，而famo.us是通过它自己的渲染树来进行页面的结构布局，这是它与HTML的区别

famo.us的官方教程

官网提供了一个famo.us的教程，链接地址为http://www.famo.us/university，提供了一系列的demo，所见即所得的编辑器和效果，助于学习。

本人总结的学习教程

需要什么?

一共需要6个文件，5个JS文件+一个CSS文件，可以在官网下载的demo文件中找到

文件结构是怎样的？

需要的库文件已经准备好了，现在如何来使用呢？首先可以在项目中新建几个文件夹

项目名称叫做famous,css文件用于放css文件，famous_libs是放了上面的6个库文件，images中放了项目中将来会使用的图片文件，js放将来会使用的js文件，src是一个比较新奇的文件夹，里面放置了页面布局的js文件(一会儿通过一个小例子了解这个src的作用吧)。

来个小例子吧

①在项目根目录中新建一个index.html文件,这里面需要做一个简单的H5基本文档，并且需要在<head>中引入famo.us的库文件，最后需要引入src文件夹中的一个一会儿需要处理的JS文件

index.html

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html>  
     <head>  
         <title>famo.us App</title>  
         <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />  
         <meta name="mobile-web-app-capable" content="yes" />  
         <meta name="apple-mobile-web-app-capable" content="yes" />  
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
 <span style="white-space:pre">    </span><!--  引入 famo.us 库文件  START    -->  
         <!-- shims for backwards compatibility   向后兼容的文件-->  
         <script type="text/javascript" src="famous_libs/functionPrototypeBind.js"></script>  
         <script type="text/javascript" src="famous_libs/classList.js"></script>  
         <script type="text/javascript" src="famous_libs/requestAnimationFrame.js"></script>  
   
         <!-- module loader 模式加载    -->  
         <script type="text/javascript" src="famous_libs/require.js"></script>  
   
         <!-- famous    famous核心文件    -->  
         <link rel="stylesheet" type="text/css" href="famous_libs/famous.css" />  
         <script type="text/javascript" src="famous_libs/famous.min.js"></script>  
 <pre name="code" class="html"><span>    </span><!--  引入 famo.us 库文件  END   -->  

②配置页面布局文件 index.js

HTML文件已经准备好了，会发现我们的这个index.html的<body>中并无任何内容，那么这个页面该怎么添加进去，实际上就需要通过JS来实现了，现在需要处理一下index.js了，在src文件件中新建index.js文件。

index.js

[javascript]view plaincopy 
   
 define(function(require, exports, module) {  
     //引入需要使用的famo.us模块  
     var Engine = require('famous/core/Engine');  
     var Surface = require('famous/core/Surface');  
     //创建一个界面容器  
     var mainContext = Engine.createContext();  
     //创建需要现实的内容  
     var firstSurface = new Surface({  
       content: 'hello world <br/><h2>FAMO.US</h2>'  
     });  
     //将创建的内容添加到界面容器中  
     mainContext.add(firstSurface);  
 });  

③见证效果吧

PS:这个简单的小例子当然无法观察到famo.us的强大，具体可以到官网查看。

这里面最最核心的就是index.js了，会发现其中

[javascript]view plaincopy 
   
 var firstSurface = new Surface({  
       content: 'hello world <br/><h2>FAMO.US</h2>'  
     });  

创建了一个Surface的对象，实际上这个Surface可以映射到HTML标签中的<div>，famo.us已经为我们封装好了

目前本人也就是刚刚接触到这，接下来还要继续学习，后期会完善。

徐文志程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
famo.us 3D游戏引擎初探

好久之前就看到了famo.us的优良特性，尤其是它避开浏览器弊病的跳跃思维，再加上自己使用JQM来开发Web App时的页面切换的白屏bug，又比对了sencha touch，最后还是决定将famo.us作为开发框架，它是基于浏览器的，目标就是使页面呈现性能最大化，而我不会拿它来做游戏，只是做简单的WebApp，要的就是这个界面显示性能。但悲剧的是国内没有关于famo.us的教程，近些日子
复制链接

扫一扫

专栏目录