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"