Mixamo viewer boilerplate

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);
+	}
+}