feat(editors/model): add support for fbx (#29)

Author: PierreDemailly

packages/editors/model/public/models/Tree.fbx

@@ -13,7 +13,7 @@ export interface ModelRendererOptions {
 }
 
 export class ModelRenderer extends ActorComponent {
-  asset: Systems.LazyAsset<THREE.Group<THREE.Object3DEventMap>>;
+  assets: Systems.LazyAsset<THREE.Group<THREE.Object3DEventMap>>[];
   model: THREE.Group<THREE.Object3DEventMap>;
 
   constructor(
@@ -25,11 +25,19 @@ export class ModelRenderer extends ActorComponent {
       typeName: "ModelRenderer"
     });
 
-    this.asset = modelLoader("models/Tiny_Witch.obj");
+    this.assets = [
+      modelLoader("models/Tiny_Witch.obj"),
+      modelLoader("models/Tree.fbx")
+    ];
   }
 
   awake() {
-    this.model = this.asset.get();
-    this.actor.threeObject.add(this.model);
+    for (const asset of this.assets) {
+      const model = asset.get();
+      if (model.name === "Tree") {
+        model.position.set(2, 0, 0);
+      }
+      this.actor.threeObject.add(model);
+    }
   }
 }

packages/editors/model/src/ModelRenderer.ts

@@ -5,16 +5,19 @@ import {
 import * as THREE from "three";
 import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
 import { MTLLoader } from "three/addons/loaders/MTLLoader.js";
+import { FBXLoader } from "three/addons/loaders/FBXLoader.js";
 
 export const modelLoader = Systems.Assets.registerLoader<THREE.Group<THREE.Object3DEventMap>>(
   {
-    extensions: [".obj"],
+    extensions: [".obj", ".fbx"],
     type: "model"
   },
   (asset, context) => {
     switch (asset.ext) {
       case ".obj":
         return objectLoader(asset, context);
+      case ".fbx":
+        return fbxLoader(asset, context);
       default:
         throw new Error(`Unsupported model type: ${asset.ext}`);
     }
@@ -68,3 +71,25 @@ function isMaterialWithMap(
     material instanceof THREE.MeshPhongMaterial
   );
 }
+
+function fbxLoader(
+  asset: Systems.Asset,
+  context: Systems.AssetLoaderContext
+): Promise<THREE.Group<THREE.Object3DEventMap>> {
+  const { manager } = context;
+
+  const loader = new FBXLoader(manager)
+    .setPath(asset.path);
+
+  return new Promise((resolve, reject) => {
+    loader.load(
+      asset.basename,
+      (object) => {
+        object.name = asset.name;
+        resolve(object);
+      },
+      void 0,
+      (error) => reject(error)
+    );
+  });
+}