c3dl 初始认识

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模型导入，则会一直处于加载状态~，请问您知道是怎么回事吗？

c3dl 初始认识

热点推荐