C3DL 2.x+ uses webGL就如所写的这篇文章,这是支持当前版本的一些浏览器版本,而且包含了一些即将推出的浏览器。这一篇教程主要是告诉大家使用什么样的浏览器做开发。
在这里我几不写webgl浏览器的支持了,因为现在只要你使用4大主流浏览器webgl的支持度都是很高的,而且也不需要任何设置了。
我们直接就看如何使用C3DL实现一个简单的场景。
这一课主要将演示 Canvas 3D Library (C3DL)的基本使用,在开始之前的教程中我想你已经有了一个可以开发webgl的浏览器了,定且下载了c3dl的api文档,canvas 3d JS api.确保你下载的版本,是2.x或更高的版本,本课是使用C3DL 2.0的版本。
在这一颗你需要一个模型和一个纹理,这里提供了模型和纹理的文件下载,如果你需要可以点击下载:: dae模型文件: duck.dae
纹理文件下载: duck.png
学习的目的:如何实现一个场景加载一个模型和纹理并且实现旋转效果;
如何把你的文件组织到一起:
如上图:
在你的工程的目录下:
1:解压缩c3dl的类库 canvas3dapi
2:为你的实例创建一个目录mydemo,你所写的代码需要放在mydemo的文件夹目录下
3:把你下载的模型和纹理放到文件夹中,如果你想让你的工程目录更加的和谐,连接你的模型和纹理,那么你需要修改部分js的代码
,可以将这些坐落在你的mydemo的文件下,但是你需要记住的是,处于安全的原因,你的模型和纹理不需要放在太高的目录。
请注意:默认的情况下google的chrome和safari /webkit是不允许你访问本地的.dae模型文件的,所以需要搭载到服务器上才可以看到。
html 文档:
mydemo文件夹里面,开始建立一个简单的html网页。
<html> <head> <title>Canvas3D tutorial #2: A Simple Scene</title> <script type="application/javascript" src="../canvas3dapi/c3dapi.js" ></script> <script type="application/javascript" src="tutorial2.js"></script> </head> <body> <!-- Add a canvas element to the page. It is scripted by using its id --> <canvas id="tutorial" style="border: 2px solid blue" width="500" height="500"></canvas> </body> </html>
javascript代码段:
tutorial2.js
请把一下代码保存为tutorial2.js文件,如果你想用其他的名字也是可以的,但是你需要修改你的html里面的连接设置
<script type=”application/javascript” src=”tutorial2.js”></script>
// Tutorial 2: the javascript // The models used need to be parsed before the page // render. This code will parse the model files // and when this is complete the parser will call the // main. The argument being passed - "tutorial" - // is the id of the canvas element on the html page. c3dl.addMainCallBack(canvasMain, "tutorial"); c3dl.addModel("duck.dae"); var duck; // The program main function canvasMain(canvasName){ // Create new c3dl.Scene object scn = new c3dl.Scene(); scn.setCanvasTag(canvasName); // Create GL context renderer = new c3dl.WebGL(); renderer.createRenderer(this); // Attach renderer to the scene scn.setRenderer(renderer); scn.init(canvasName); //the isReady() function tests whether or not a renderer //is attached to a scene. If the renderer failed to //initialize this will return false but only after you //try to attach it to a scene. if(renderer.isReady() ) { // Create a Collada object that // will contain a imported // model of something to put // in the scene. duck = new c3dl.Collada(); // If the path is already parsed // (as it is in this case) // then the model is automatically retrieved // from a collada manager. duck.init("duck.dae"); // Give the duck a bit of a spin on y duck.setAngularVel(new Array(0.0, -0.001, 0.0)); // Add the object to the scene scn.addObjectToScene(duck); // Create a camera var cam = new c3dl.FreeCamera(); // Place the camera. // WebGL uses a right handed co-ordinate system. // move 200 to the right // move 300 up // move 500 units out cam.setPosition(new Array(200.0, 300.0, 500.0)); // Point the camera. // Here it is pointed at the same location as // the duck so the duck will appear centered. cam.setLookAtPoint(new Array(0.0, 0.0, 0.0)); // Add the camera to the scene scn.setCamera(cam); // Start the scene scn.startScene(); } }
佐笾已逝
现在你打开你的网页可以看到一直旋转的黄色的小鸭子;兄弟那么你就成功了,