c3dl 初步认识

最新推荐文章于 2022-02-19 23:27:09 发布

佐笾已逝

最新推荐文章于 2022-02-19 23:27:09 发布

阅读量246

点赞数

分类专栏： 3D 文章文章标签： Tomcat Chrome HTML5 Myeclipse 浏览器

本文链接：https://blog.csdn.net/wjlgryx/article/details/83873207

版权

3D 文章专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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文件，在确保路径正确的情况下程序会出现一个黄色的旋转的小鸭子。。。。