第1章—O3D程序框架

关注

原创最新推荐文章于 2026-04-24 12:06:06 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

使用O3D javascript API构建一个O3D应用在HTML中导入所需要的js包。O3D Example  O3D Example 一个复杂的3D应用包含场景、摄像机、3D几何体、灯管和材质等。o3djs.require(o3djs.util);o3djs.require(o3djs.rendergraph 阅读详情

一、要创建一个o3d项目需要做的基本工作

1、生成o3d对象

2、给全局变量赋值并且初始化API库

3、生成pack包，用于管理所有产生的o3d对象

4、生成渲染图形

5、建立上绘图环境（透视网格和视图转换）

6、生成效果，并加载渲染信息

7、生成素材和形状，设置素材列表及其他素材参数

8、对模型添加动作及形状

9、生成绘制元素列表

10、建立渲染回调函数，在每次3D模型刷新时执行特定任务

二、HTML文档

一个o3d应用程序是基于HTML的，主要的o3d功能是HTML文档的<head></head>标签之间，包含在<script>标签元素的代码实现的，例如下面的代码。

当HTML文档完成加载时，o3d的init()函数被调用。当关闭HTML文档时，会触发onunload事件，从而调用o3d的uninit()函数，完成一些清理工作，比如对象的删除，内存释放等。

三、o3d接口API库

O3D包含了一系列公用库，如果要用某个功能函数，就需要在程序的开始在<script>标签内加载该代码。如下所示，第一个<script>标签内的加载的库中定义了require()函数，用这个函数来加载其他的接口API库。

四、生成O3D插件对象

在代码示例中，init()函数调用了o3d库函数o3djs.util.makeClients()，以此来产生o3d对象。当这个函数返回时，它会调用回调函数initStep2()。用户浏览器必须允许脚本执行。

function init() {
o3djs.util.makeClients(initStep2)
}

在页面设置客户区窗口大小（即O3D程序运行区域）

用库函数o3djs.util.makeClients()在HTML中生成O3D对象可以跨平台使用。这个函数查找HTML文档中所有id以"o3d"开头的（例如o3d，o3d-element等）<div>标签，并在里面插入一客户区，以运行O3D程序。客户区域大小默认设置为100%，因此<div>必须有大小设置，如下

<div id="o3d" style="width:800px; height:600px" />

<div id="o3d" style="width:100%; height:100%" />

makeClients()函数传入一个回调函数作为参数，一旦o3d对象被创建，此回调函数就会被触发。

五、建立基本的O3D

给全局变量赋值：

var o3dElement = clientElements[0];
g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;

上面的变量有如下意义：

• o3dElement 是HTML O3D元素，是DOM的一部分

• g_client 是O3D应用程序的入口点
• g_o3d 是O3D的命名空间
• g_math是o3d数学库的命名空间

六、产生对象包pack

对象包容纳了o3d的所有对象，并控制这些对象的生命周期。

g_pack = g_client.createPack();

七、创建渲染图

下这段例子代码，用库函数renderGraph.createBasicView()产生一个标准的渲染图。这个渲染图有两个绘图列表，一个用于绘制非透明材质的元素（性能绘图列表），另一个用于绘制透明材质元素（透明效果绘图列表）

var viewInfo = o3djs.renderGraph.createBasicView(
g_pack,
g_client.root,
g_client.renderGraphRoot);

八、设置绘图背景（drawContext）

绘图背景指定了视图投影和虚拟摄像机的位置。drawContext对象是用库函数renderGraph.createBasicView()产生的。下面的例子代码展示了如何设置它的参数：

// 建立一个简单的透视图

viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30度视场

g_client.width / g_client.height,
1, // 靠近平面

5000); // 远离平面
// 建立视图变换注视模型所在的区域

viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // 眼睛

[0, 0, 0], // 目标
[0, 1, 0]); // 向上

九、创建一个效果并加载渲染

顶点和像素着色器定义在HTML文档的<textarea>之间。着色器控制每个像素的颜色计算。下面的代码产生效果（redEffect）并将渲染内容读入着色器。

var redEffect = g_pack.createObject('Effect');
// 在HTML文档中寻找“Effect”的元素

var shaderString = document.getElementById('effect').value;
// 将元素<textarea id="effect"> 中的所有内容加载到Effect对象中

redEffect.loadFromFXString(shaderString);

十、生成材质和形状

模型的材质是在initStep2()中创建的，并被赋给渲染列表，该列表控制非透明材质。在下面的代码将模型的材质效果设置为红色 'redEffect’，这样图形硬件可以可以对模型进行适当的渲染。在下面的代码中，由于将模型所有像素都设置为红色，所以没有进行复杂的渲染计算。代码中的createCube()函数，创建了几何立方体，并渲染成红色材质。可以将立方体替换成SketchUp, 3ds Max或者Maya

等工具建的模型。

var redMaterial = g_pack.createObject('Material');
redMaterial.drawList = viewInfo.performanceDrawList;
redMaterial.effect = redEffect;
var cubeShape = createCube(redMaterial);

十一、给模型建立动作

下面的代码给模型赋予了简单的动作变换。

g_cubeTransform = g_pack.createObject('Transform');
g_cubeTransform.addShape(cubeShape);
g_cubeTransform.parent(g_client.root);

十二、产生绘制元素（Draw Elements）

每个图形基元都有一个用于描述该图形的材质及效果的绘制元素（draw element）。库函数createDrawElements()为每个图形基元生成不同的绘制元素（draw element）并将这些绘制元素添加到与图形基元材质有关的绘制列表（draw list）中。当窗口渲染时，系统会为每个绘制列表（draw list）产生一次绘制刷新（draw pass），这样所有的在绘制列表（draw list）中的绘制元素（draw element）就会被渲染。

cubeShape.createDrawElements(g_pack, null);

十三、设置渲染回调函数

每次硬件刷新屏幕时，场景都会被自动渲染。下面的例子代码中setRenderCallback()函数设置了一个回调，用于每次场景渲染时更新模型的动作及形状。

g_client.setRenderCallback(renderCallback);