chore(model): treat mesh as child of model object

src/lib/map/DoodadManager.ts

@@ -4,7 +4,7 @@ import TextureManager from '../texture/TextureManager.js';
 import { AssetHost } from '../asset.js';
 import { MapAreaSpec } from './loader/types.js';
 import MapLight from './light/MapLight.js';
-import ModelMesh from '../model/ModelMesh.js';
+import Model from '../model/Model.js';
 
 type DoodadManagerOptions = {
   host: AssetHost;
@@ -53,7 +53,7 @@ class DoodadManager {
     }
 
     for (const model of group.children) {
-      (model as ModelMesh).dispose();
+      (model as Model).dispose();
     }
 
     this.#loadedAreas.delete(areaId);

src/lib/model/ModelMesh.ts → src/lib/model/Model.ts

@@ -3,7 +3,9 @@ import ModelMaterial from './ModelMaterial.js';
 import ModelAnimator from './ModelAnimator.js';
 import { ModelMaterialColor, ModelTextureTransform } from './types.js';
 
-class ModelMesh extends THREE.Mesh {
+class Model extends THREE.Object3D {
+  #mesh: THREE.Mesh;
+
   #animator: ModelAnimator;
   #animationActions: Set<THREE.AnimationAction> = new Set();
 
@@ -23,7 +25,11 @@ class ModelMesh extends THREE.Mesh {
     textureTransformCount: number,
     materialColorCount: number,
   ) {
-    super(geometry, materials);
+    super();
+
+    this.#mesh = new THREE.Mesh(geometry, materials);
+    this.#mesh.onBeforeRender = this.#onBeforeRender.bind(this);
+    this.add(this.#mesh);
 
     this.#animator = animator;
 
@@ -72,7 +78,7 @@ class ModelMesh extends THREE.Mesh {
     }
   }
 
-  onBeforeRender(
+  #onBeforeRender(
     renderer: THREE.WebGLRenderer,
     scene: THREE.Scene,
     camera: THREE.Camera,
@@ -92,5 +98,5 @@ class ModelMesh extends THREE.Mesh {
   }
 }
 
-export default ModelMesh;
-export { ModelMesh };
+export default Model;
+export { Model };

src/lib/model/ModelManager.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { M2_TEXTURE_COMPONENT, M2_TEXTURE_FLAG } from '@wowserhq/format';
 import TextureManager from '../texture/TextureManager.js';
 import { AssetHost, normalizePath } from '../asset.js';
-import ModelMesh from './ModelMesh.js';
+import Model from './Model.js';
 import ModelMaterial from './ModelMaterial.js';
 import { getVertexShader } from './shader/vertex.js';
 import { getFragmentShader } from './shader/fragment.js';
@@ -47,7 +47,7 @@ class ModelManager {
 
   async get(path: string) {
     const resources = await this.#getResources(path);
-    return this.#createMesh(resources);
+    return this.#createModel(resources);
   }
 
   update(deltaTime: number) {
@@ -200,8 +200,8 @@ class ModelManager {
     return new THREE.Texture();
   }
 
-  #createMesh(resources: ModelResources) {
-    const mesh = new ModelMesh(
+  #createModel(resources: ModelResources) {
+    const model = new Model(
       resources.geometry,
       resources.materials,
       resources.animator,
@@ -210,9 +210,9 @@ class ModelManager {
       resources.materialColorCount,
     );
 
-    mesh.name = resources.name;
+    model.name = resources.name;
 
-    return mesh;
+    return model;
   }
 
   #createAnimator(spec: ModelSpec) {

src/lib/model/ModelMaterial.ts

@@ -5,7 +5,7 @@ import {
   M2_MATERIAL_BLEND_TO_THREE_BLEND_TRANSPARENT,
 } from './const.js';
 import { THREE_BLEND_STATE } from '../blend.js';
-import ModelMesh from './ModelMesh.js';
+import Model from './Model.js';
 
 const DEFAULT_BLEND: M2_MATERIAL_BLEND = M2_MATERIAL_BLEND.BLEND_OPAQUE;
 const DEFAULT_FLAGS: number = 0x0;
@@ -128,7 +128,7 @@ class ModelMaterial extends THREE.RawShaderMaterial {
     this.#materialParams.setZ(lit);
   }
 
-  prepareMaterial(model: ModelMesh) {
+  prepareMaterial(model: Model) {
     // Colors and weights
 
     const materialColor = model.materialColors[this.#colorIndex];