c3dl 官方教程(二)

wjlgryx

浏览: 313047 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

3D 文章

JavaScript Chrome webkit Safari PHP

教程＃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>
        
        <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();
}
}

小结
如果运行成功的话你将会看到一个旋转的小鸭子

查看图片附件

分享到：

WebGL的框架 | C3DL 官方教程(一)

2011-03-18 16:13
浏览 1907
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论