Mixamo viewer boilerplate

studio-frontend/src/app/app.element.ts

@@ -21,6 +21,7 @@ import { Ref, createRef, ref } from "lit-html/directives/ref.js";
 import "@storyteller/studio-web/canvas-provider";
 import "@storyteller/studio-web/viewer";
 import "@storyteller/studio-web/bvh-viewer";
+import "@storyteller/studio-web/mixamo-viewer";
 import "./button.element";
 import "./help.element";
 import "./icon.element";
@@ -46,6 +47,7 @@ export class AppElement extends LitElement {
 	@state() selection?: string | null;
 
 	@state() bvhPath?: string;
+	@state() mixamoPath?: string;
 	@state() mode?: StudioMode;
 
 	#sceneObjects: studio.SceneObject[] = [];
@@ -67,6 +69,9 @@ export class AppElement extends LitElement {
 		if (params.has("bvh"))
 			this.bvhPath = params.get("bvh")!;
 
+		if (params.has("mixamo"))
+			this.mixamoPath = params.get("mixamo")!;
+
 		this.mode = match (params.get("mode"), {
 			"studio": () => StudioMode.Editor,
 			"viewer": () => StudioMode.Viewer,
@@ -195,6 +200,12 @@ export class AppElement extends LitElement {
 					skyboxId="test_scene"
 					@scene-state=${this.onSceneStateChange}
 				></sts-bvh-viewer>
+			` : this.mixamoPath ? html`
+				<sts-mixamo-viewer
+					mixamoPath=${this.mixamoPath}
+					skyboxId="test_scene"
+					@scene-state=${this.onSceneStateChange}
+				></sts-mixamo-viewer>
 			` : html`
 				<sts-viewer
 					objectId="hip-hop-dancing.gltf"

studio-web/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./lib/bvh-viewer.element";
+export * from "./lib/mixamo-viewer.element";
 export * from "./lib/canvas-provider.element";
 export * from "./lib/viewer.element";

studio-web/src/lib/bvh-viewer.element.ts

@@ -1,9 +1,9 @@
 import * as studio from "@storyteller/studio";
 import { ViewportSize } from "@storyteller/studio";
+import { PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { StudioBaseElement } from "./studio-base.element";
-import { PropertyValues } from "lit";
 
 @customElement("sts-bvh-viewer")
 export class BvhViewerElement extends StudioBaseElement {

studio-web/src/lib/mixamo-viewer.element.ts

@@ -0,0 +1,34 @@
+import * as studio from "@storyteller/studio";
+import { ViewportSize } from "@storyteller/studio";
+import { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { StudioBaseElement } from "./studio-base.element";
+
+@customElement("sts-mixamo-viewer")
+export class MixamoViewerElement extends StudioBaseElement {
+	@property() mixamoPath?: string;
+	@property() skyboxId?: string;
+
+	onStart(viewportSize: ViewportSize): void {
+		if (!this.mixamoPath) return;
+		if (!this.skyboxId) return;
+
+		studio.startMixamoViewer(
+			this.mixamoPath,
+			this.skyboxId,
+			`#${this._canvasProvider!.canvasId}`,
+			"Storyteller Studio",
+			viewportSize,
+		);
+	}
+
+	onChanges(changes: PropertyValues<this>): void {
+		if (changes.has("mixamoPath") && !!this.mixamoPath) {
+			// TODO
+		}
+
+		if (changes.has("skyboxId") && !!this.skyboxId)
+			studio.setSkybox(this.skyboxId);
+	}
+}

studio/src/lib.rs

@@ -115,6 +115,29 @@ pub fn start_bvh_viewer(
     app.run();
 }
 
+#[cfg_attr(feature = "wasm", wasm_bindgen(js_name = startMixamoViewer))]
+pub fn start_mixamo_viewer(
+    mixamo_path: &str,
+    skybox_id: &str,
+    canvas_selector: &str,
+    canvas_alt: &str,
+    viewport_size: ViewportSize,
+) {
+    let mut app = start_internal(
+        "Mannequin.gltf",
+        skybox_id,
+        canvas_selector,
+        canvas_alt,
+        viewport_size,
+        StudioMode::Viewer,
+    );
+
+    // TODO
+    info!("Mixamo path: '{mixamo_path}'");
+
+    app.run();
+}
+
 #[cfg_attr(feature = "wasm", wasm_bindgen(js_name = startViewer))]
 /// Start the application as a read-only viewer for a single library object.
 ///

tsconfig.base.json

@@ -21,6 +21,7 @@
       "@storyteller/studio-web/canvas-provider": ["studio-web/src/lib/canvas-provider.element.ts"],
       "@storyteller/studio-web/viewer": ["studio-web/src/lib/viewer.element.ts"],
       "@storyteller/studio-web/bvh-viewer": ["studio-web/src/lib/bvh-viewer.element.ts"],
+      "@storyteller/studio-web/mixamo-viewer": ["studio-web/src/lib/mixamo-viewer.element.ts"],
       "@storyteller/utility": ["utility/src/index.ts"]
     }
   },