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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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();
 }
}
 
佐笾已逝
现在你打开你的网页可以看到一直旋转的黄色的小鸭子;兄弟那么你就成功了,
 
 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值