C3DL教程第一课：一个简单的场景

最新推荐文章于 2024-09-12 08:01:27 发布

原创最新推荐文章于 2024-09-12 08:01:27 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c #浏览器 #html #object #cam #safari

本教程指导您如何在现代浏览器中使用C3DL2.x和WebGL创建一个简单的旋转3D场景，包括加载模型、纹理及实现基本交互。

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里面的连接设置

// 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();
 }
}

佐笾已逝

现在你打开你的网页可以看到一直旋转的黄色的小鸭子；兄弟那么你就成功了，