应用框架客户端

撰写时间：2023-09-13

修订时间：2026-04-25

应用框架入口

WebGLApp.html是框架应用的入口。从架构的方面来讲，它是应用框架的使用者或者客户端。

运行应用，查看应用框架所能给我们带来的最终效果。

现在还看不出来，应用中藏有许多彩蛋。下面章节将逐一揭示并详细说明如何实现。

着色器代码

其着色器代码与之前的完全一致。

客户端代码

第1步，导入所需的模块。

import { WebGLApp, VIEWPORT_LAYOUT, ConeFrustumMesh, BoxMesh, CubeMesh, GridFloorMesh, GLColors } from './js/esm/index-independent.js';

第2步，创建WebGLApp的一个实例。

let app = new WebGLApp({ bgColor: GLColors.BLACK });

应用程序的背景设为黑色。

第3步，调用app的doInInitViewports方法。

app.doInInitViewports((cameraManager, viewportManager) => { cameraManager.eyeDist = 20; viewportManager.useLayout(VIEWPORT_LAYOUT.Left_2_Right_2); });

WebGLApp类的doInInitViewports方法的参数是一个回调函数，该回调函数的cameraManager及viewportManager这两个参数将由WebGLApp类负责注入。客户端因此得以直接使用它们进行相应的初始化。

这样设计的原因是，WebGLApp类负责应用程序的生命周期，从相应状态的初始化，到程序的运行，都由其全程管理。而创建各个类的顺序有一定的要求。如，渲染环境必须先创建，才能创建并初始化其他类。WebGLApp类根据最小需求，依序实例化这些类后，再通过回调函数的形式传递给客户端，从而兼顾了实例化的正确顺序及允许客户端进行相应配置的特定需求。而从客户端来讲，他无需关心如何实例化这些由系统管理的类，反倒很方便。

代码：

cameraManager.eyeDist = 20;

将相机置于Z轴值为20的位置。因为用户可能选择使用多个视口的布局，而各个视口的相机位置的初始化数值应当相同，因此我们只需设置cameraManager的eyeDist属性值，它会自动统一所有视口的相机位置。cameraManager还有另一个属性fov，用于设置相机的视域，其默认值为30，这里不需要重新设置。

代码：

viewportManager.useLayout(VIEWPORT_LAYOUT.Left_2_Right_2);

使用上下左右的4个视口的布局。

与前两章的实现相比，viewportManager的useLayout方法让我们从如何初始化一个Viewport对象的细节中彻底解脱出来。

第4步，调用app的doInInitMeshes方法。

app.doInInitMeshes((scene) => { let mesh1 = new ConeFrustumMesh(1.0, 5, 1.5, 0.6); scene.add(mesh1); let mesh2 = new BoxMesh(2, 2, 0.5, 0.1, 0.1, 0.1, GLColors.FORESTGREEN); mesh2.translate([-3.5, 0, 0]); scene.add(mesh2); let mesh3 = new CubeMesh(1); mesh3.translate([3.5, 0, 0]); scene.add(mesh3); let floor = new GridFloorMesh(0.5, 20); scene.add(floor); });

该方法回调函数中的参数scene也是由app自动创建后注入。客户端在此方法中创建好各个网格物体并确定在场景中的位置后，调用scene的add方法添加进场景中即可。

可直接创建诸如ConeFrustumMesh（圆锥台）、BoxMesh（能盛东西的盒子）、CubeMesh（立方体）、GridFloorMesh（网格地板）等3D模型。

且每个网格物体已支持诸如translate, rotate等模型变换的方法。

第5步，运行app：

app.run();

在其内部，它将调用viewportManager的doOnResize方法，确保程序正常运行并正确响应各种事件。

短短不到30行的代码，一个功能齐全的多视口应用程序就出来了。这就是应用程序框架的威力与魅力所在。