Load BVH skeleton

Author: yuripourre

editor/src/editor/layout/assets-browser.tsx

@@ -65,6 +65,7 @@ import { FileInspectorObject } from "./inspector/file";
 import { AssetBrowserGUIItem } from "./assets-browser/items/gui-item";
 import { AssetBrowserHDRItem } from "./assets-browser/items/hdr-item";
 import { AssetBrowserMeshItem } from "./assets-browser/items/mesh-item";
+import { AssetBrowserSkeletonItem } from "./assets-browser/items/skeleton-item";
 import { AssetBrowserSceneItem } from "./assets-browser/items/scene-item";
 import { AssetBrowserImageItem } from "./assets-browser/items/image-item";
 import { AssetBrowserMaterialItem } from "./assets-browser/items/material-item";
@@ -90,6 +91,7 @@ const ImageSelectable = createSelectable(AssetBrowserImageItem);
 const SceneSelectable = createSelectable(AssetBrowserSceneItem);
 const MaterialSelectable = createSelectable(AssetBrowserMaterialItem);
 const CinematicSelectable = createSelectable(AssetBrowserCinematicItem);
+const SkeletonSelectable = createSelectable(AssetBrowserSkeletonItem);
 
 export interface IEditorAssetsBrowserProps {
 	/**
@@ -791,6 +793,10 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 			case ".babylon":
 				return <MeshSelectable {...props} />;
 
+			case ".bvh":
+			case ".BVH":
+				return <SkeletonSelectable {...props} />;
+
 			case ".material":
 				return <MaterialSelectable {...props} />;
 

editor/src/editor/layout/assets-browser/items/item.tsx

@@ -15,7 +15,7 @@ import { toast } from "sonner";
 import { VscJson } from "react-icons/vsc";
 import { ImFinder } from "react-icons/im";
 import { BiSolidFileCss } from "react-icons/bi";
-import { GiCeilingLight } from "react-icons/gi";
+import { GiCeilingLight, GiSkeletonInside } from "react-icons/gi";
 import { GrStatusUnknown } from "react-icons/gr";
 import { BsFiletypeMp3, BsFiletypeWav } from "react-icons/bs";
 import { AiFillFileMarkdown, AiOutlineClose } from "react-icons/ai";
@@ -455,6 +455,10 @@ export class AssetsBrowserItem extends Component<IAssetsBrowserItemProps, IAsset
 			case ".bjseditor":
 				return <SiBabylondotjs size="64px" />;
 
+			case ".bvh":
+			case ".BVH":
+				return <GiSkeletonInside size="64px" />;
+
 			case ".ies":
 				return <GiCeilingLight size="64px" />;
 

editor/src/editor/layout/assets-browser/items/skeleton-item.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+
+import { GiSkeletonInside } from "react-icons/gi";
+
+import { SceneLoader, Debug } from "babylonjs";
+
+import { AssetsBrowserItem } from "./item";
+import { ContextMenuItem } from "../../../../ui/shadcn/ui/context-menu";
+
+export class AssetBrowserSkeletonItem extends AssetsBrowserItem {
+	/**
+	 * @override
+	 */
+	protected getContextMenuContent(): ReactNode {
+		return (
+			<>
+				<ContextMenuItem className="flex items-center gap-2" onClick={() => this._handleLoadSkeletonToScene()}>
+					<GiSkeletonInside className="w-5 h-5" /> Load to Scene
+				</ContextMenuItem>
+			</>
+		);
+	}
+
+	/**
+	 * @override
+	 */
+	protected getIcon(): ReactNode {
+		return <GiSkeletonInside size="64px" />;
+	}
+
+	/**
+	 * @override
+	 */
+	protected async onDoubleClick(): Promise<void> {
+		await this._handleLoadSkeletonToScene();
+	}
+
+	private async _handleLoadSkeletonToScene(): Promise<void> {
+		const scene = this.props.editor.layout.preview.scene;
+		if (!scene) {
+			return;
+		}
+
+		try {
+			// Load the BVH file using SceneLoader
+			const result = await SceneLoader.ImportMeshAsync("", "", this.props.absolutePath, scene);
+
+			// Get the skeleton from the result
+			const skeleton = result.skeletons[0];
+
+			if (skeleton) {
+				// Create a skeleton viewer to visualize the skeleton
+				const viewer = new Debug.SkeletonViewer(skeleton, null, scene, false, 1, {
+					displayMode: Debug.SkeletonViewer.DISPLAY_SPHERE_AND_SPURS,
+				});
+				viewer.isEnabled = true;
+
+				// Start the animation if available
+				const highestFrame = skeleton.bones[0]?.animations[0]?.getHighestFrame() ?? 60;
+				scene.beginAnimation(skeleton, 0, highestFrame, true);
+
+				// Notify the user
+				this.props.editor.layout.console.log(`Loaded skeleton: ${skeleton.name} with ${skeleton.bones.length} bones`);
+			} else {
+				this.props.editor.layout.console.warn("No skeleton found in the BVH file");
+			}
+		} catch (error) {
+			console.error("Failed to load BVH file:", error);
+			this.props.editor.layout.console.error(`Failed to load BVH file: ${error}`);
+		}
+	}
+}

editor/src/editor/layout/preview.tsx

@@ -1099,6 +1099,8 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 
 			const extension = extname(absolutePath).toLowerCase();
 			switch (extension) {
+				case ".bvh":
+				case ".BVH":
 				case ".x":
 				case ".b3d":
 				case ".dae":