一课：一个简单的场景"/>
C3DL教程第一课：一个简单的场景
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 objectscn = new c3dl.Scene();scn.setCanvasTag(canvasName);// Create GL contextrenderer = new c3dl.WebGL();renderer.createRenderer(this);// Attach renderer to the scenescn.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 yduck.setAngularVel(new Array(0.0, -0.001, 0.0));// Add the object to the scenescn.addObjectToScene(duck);// Create a cameravar 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 outcam.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 scenescn.setCamera(cam);// Start the scenescn.startScene();}
}
佐笾已逝
现在你打开你的网页可以看到一直旋转的黄色的小鸭子；兄弟那么你就成功了，
更多推荐
C3DL教程第一课：一个简单的场景
发布评论