export createMMLCharacterString function (#86)

packages/3d-web-avatar-editor-ui/src/CharacterPartsSelector.tsx

@@ -1,3 +1,4 @@
+import { createMMLCharacterString } from "@mml-io/3d-web-avatar";
 import { useCallback, useEffect, useState } from "react";
 
 import { AssetDescription, CharacterComposition, CollectionDataType } from "./types";
@@ -32,10 +33,13 @@ export function CharacterPartsSelector<C extends CollectionDataType>({
   const createMMLDescription = useCallback(() => {
     const fullBody = currentSelection[fullBodyKey];
     const remainingParts = Object.entries(currentSelection).filter(([key]) => key !== fullBodyKey);
-    const description = `<m-character src="${fullBody}">
-${remainingParts.map(([key, asset]) => `<m-model src="${asset.asset}"></m-model>`).join("\n")}
-</m-character>
-    `;
+
+    const description = createMMLCharacterString({
+      base: { url: fullBody.asset },
+      parts: remainingParts.map(([, assetDescription]) => {
+        return { url: assetDescription.asset };
+      }),
+    });
     console.log(description);
   }, [currentSelection, fullBodyKey]);
 

packages/3d-web-avatar/src/helpers/createMMLCharacterString.ts

@@ -0,0 +1,13 @@
+import { MMLCharacterDescription } from "./parseMMLDescription";
+
+export const createMMLCharacterString = (characterDescription: MMLCharacterDescription): string => {
+  const base = characterDescription.base.url;
+
+  const partsTags = characterDescription.parts.map(
+    (part) => `<m-model src="${part.url}"></m-model>`,
+  );
+
+  return `<m-character src="${base}">
+  ${partsTags.join("\n  ")}
+</m-character>`;
+};

packages/3d-web-avatar/src/index.ts

@@ -7,3 +7,4 @@ export {
   type MMLCharacterDescription,
   parseMMLDescription,
 } from "./helpers/parseMMLDescription";
+export { createMMLCharacterString } from "./helpers/createMMLCharacterString";