如何在Doom3场景中运行多个MD5骨骼动画序列

1. 准备工作：

  • 首先生成一个名为index.html文件，作为Application运行的宿主，具体源码如下所示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>Document</title>
  8.     </head>
  9.     <body>
  10.         <canvas id="webgl" width="800" height="600" style="background: lightgray;" />
  11.     </body>
  12.     <script src="./dist/bundle.js">
  13.     </script>
  14. </html>

  • 然后生成一个例如名为maint.ts的入口文件，具体源码如下所示：

  1. import { Doom3SceneWithMD5SkeletionApplication } from "./demo/Doom3SceneWithMD5Sketion";
  2. // 获取用于获得webgl上下文对象的HTMLCanvasElement元素
  3. let canvas: HTMLCanvasElement | null = document.getElementById( 'webgl' ) as HTMLCanvasElement;
  4. // 创建Doom3SceneWithMD5Skeletion对象
  5. let app: Doom3SceneWithMD5SkeletionApplication = new Doom3SceneWithMD5SkeletionApplication( canvas );
  6. // 调用run方法进入不停刷新和绘制流程
  7. app.run();