[1]C3DL学习日记1

最新推荐文章于 2024-04-24 22:53:20 发布

dinsy

最新推荐文章于 2024-04-24 22:53:20 发布

阅读量578

点赞数

分类专栏： C3DL 文章标签： c myeclipse html cam chrome html5

本文链接：https://blog.csdn.net/dinsy/article/details/6105397

版权

C3DL 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

C3DL是一个基于HTML5的WEBGL框架,官网地址：http://www.c3dl.org 。今天开始正式进入基于HTML5的3D开发,,来了。。。。。。
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文件，在确保路径正确的情况下程序会出现一个黄色的旋转的小鸭子。。。。