教程#2:一个简单的场景
本教程将展示C3DL)的基础知识使用三维库,在开始本教程之前,请确保你有一个浏览器是支持WebGL的启用。 教程#1 介绍了如何做到这一点。 下载 http://www.c3dl.org/index.php/download/
的API的三维画布 。 确保你下载的版本是2.1或更高。 WebGL的早期版本的C3DL使用画布是三维的。 本教程是写给释放C3DL的2.0。 您还需要一本教程模型和纹理。 你可以下载一个模型,一个鸭前发在这里:duck文件:
http://www.c3dl.org/wp-content/2.0Release/Resources/duck.dae
鸭纹理文件: duck.png
http://www.c3dl.org/wp-content/2.0Release/Resources/duck.png
目标:
演示了如何设置和使用创造一个有帆元素,显示了一个旋转物体的三维网页画布JS库。
如何组织您的文件:
在您的工作目录:
解压缩的程序库版本
为您的演示目录。 在这个例子中,工作目录称为mydemo。
下载的canvas3d API是在名为canvas3dapi的文件夹 的代码,您会写会被放置到mydemo文件夹。
将所有文件夹中的mydemo模型和纹理。 如果您想进一步组织您的模型,就修改参数来实现。 但是,请记住,出于安全原因,模型和纹理不能在一个更高的目录中。
警告:默认情况下chrome和Safari / WebKit不会让你在本地打开文件。 如果你要在本地测试,你需要使用火狐添加允许文件访问。 这不是一个问题,如果你放到一个远程计算机上可以看到这些教程。
HTML文档
mydemo文件夹内,通过创建一个简单的HTML页的开头。
<html>
<head>
<title>Cavas3D 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
// 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 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();
}
}
小结
如果运行成功的话你将会看到一个旋转的小鸭子