`
wjlgryx
  • 浏览: 297653 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

c3dl 初步认识

阅读更多

C3DL是一个基于HTML5的WEBGL框架,官网地址:http://www.c3dl.org 
C3DL网站直接提供了JS LIB的下载和API,还有几个简单的教程,先从教程开始一步步学。
官网教程1说的是对浏览器的选择,选用chrome10,或火狐4.X版本,这里需要注意使用chrome无法直接读取本地文件,需要使用服务器.后续介绍
教程2,运行helloword
第一步,先下载JS LIB。http://www.c3dl.org/index.php/download/ ,(截止2010-12-29最新是2.1)点击最新版本的"Non-compressed release"进行下载。
第二步,用MyEclipse搭建好Web工程及Tomcat.如果使用火狐浏览器可省略,直接运行html就可以
第三步,创建html文档,并引入C3DL JS LIB 下面的c3dapi.js
  <body>
        <canvas id="tutorial" style="border: 2px solid blue" width="500" height="500"></canvas>
    </body>
第三步,创建helloword.js文件并将其引入到HTML内
  /*添加回调方法,canvasMain回调函数,tutorial是canvas的元素ID*/
  c3dl.addMainCallBack(canvasMain, "tutorial");
  c3dl.addModel("duck.dae");
  var duck;
 
  /*定义canvasMain函数*/
  function canvasMain(canvasName){
 
   /*创建场景并初始化*/
   scn = new c3dl.Scene();
   scn.setCanvasTag(canvasName);

   /*创建渲染器*/
   renderer = new c3dl.WebGL();
   renderer.createRenderer(this);
   scn.setRenderer(renderer);
   scn.init(canvasName);
 
  /*判断randerer可用性*/
   if(renderer.isReady() )
   {
  /*创建Collada对象,导入dae模型*/
   duck = new c3dl.Collada();
 
  /*设置对象的模型*/
   duck.init("duck.dae");
 
  /*设置物体旋转,x,y,z*/
   duck.setAngularVel(new Array(0.0, 0.001, 0.0));
 
  /*将物体添加到画布*/
   scn.addObjectToScene(duck);
 
  /*创建相机*/
   var cam = new c3dl.FreeCamera();
 
  /*相机位置*/
   cam.setPosition(new Array(200.0, 300.0, 500.0));
 
  /*相机看的点*/
   cam.setLookAtPoint(new Array(0.0, 0.0, 0.0));
 
  /*将相机添加到画布*/
   scn.setCamera(cam);
 
  /*开画了*/
   scn.startScene();
   }
  }
第四步,下载以下资源到目录下
    dea:http://www.c3dl.org/wp-content/2.0Release/Resources/duck.dae
    贴图:http://www.c3dl.org/wp-content/2.0Release/Resources/duck.png
第五步,运行tomcat,访问页面,如果用火狐可以直接打开html文件,在确保路径正确的情况下程序会出现一个黄色的旋转的小鸭子。。。。

 

分享到:
评论
1 楼 sardodo 2012-05-16  
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小鸭子的,但我使用3ds max2011创建的dae模型导入,则会一直处于加载状态~,请问您知道是怎么回事吗?

相关推荐

Global site tag (gtag.js) - Google Analytics