Full mint support

.gitignore

@@ -99,6 +99,11 @@ web_modules/
 
 # Optional eslint cache
 .eslintcache
+<<<<<<< HEAD
+lerna-debug.log
+.vscode
+=======
+<<<<<<< HEAD
 
 # Microbundle cache
 .rpt2_cache/
@@ -274,3 +279,8 @@ fabric.properties
 # Documentation here: https://yarnpkg.com/features/zero-installs
 #!/.yarn/cache
 /.pnp.*
+=======
+lerna-debug.log
+.vscode
+>>>>>>> 994de2e (adjust mint page to match figma mockups)
+>>>>>>> d966492f20f4b3cee4c2907137944cdd50c0f15e

package.json

@@ -56,6 +56,7 @@
     "eslint-plugin-no-inline-styles": "^1.0.5",
     "eslint-plugin-react": "^7.31.11",
     "prettier": "^2.3.2",
+    "sass": "^1.58.0",
     "vite": "^4.0.0"
   }
 }

src/App.jsx

@@ -12,19 +12,22 @@ import { BlinkManager } from "./library/blinkManager"
 import { LookAtManager } from "./library/lookatManager"
 import { EffectManager } from "./library/effectManager"
 import { AnimationManager } from "./library/animationManager"
+import { ScreenshotManager } from "./library/screenshotManager"
 
 import Scene from "./components/Scene"
 import Background from "./components/Background"
 
 import View from "./pages/View"
 import Save from "./pages/Save"
 import Load from "./pages/Load"
+import Mint from "./pages/Mint"
 import BioPage from "./pages/Bio"
 import Create from "./pages/Create"
 import Landing from "./pages/Landing"
 import Appearance from "./pages/Appearance"
 import LanguageSwitch from "./components/LanguageSwitch"
 
+
 // dynamically import the manifest
 const assetImportPath = import.meta.env.VITE_ASSET_PATH + "/manifest.json"
 const peresonalityImportPath =
@@ -109,6 +112,7 @@ async function fetchAll() {
   const blinkManager = new BlinkManager(0.1, 0.1, 0.5, 5)
   const lookatManager = new LookAtManager(80, "editor-scene")
   const effectManager = new EffectManager()
+  const screenshotManager = new ScreenshotManager()
 
   return {
     initialManifest,
@@ -117,6 +121,7 @@ async function fetchAll() {
     blinkManager,
     lookatManager,
     effectManager,
+    screenshotManager,
   }
 }
 
@@ -158,6 +163,7 @@ export default function App() {
     blinkManager,
     lookatManager,
     effectManager,
+    screenshotManager,
   } = resource.read()
 
   const [hideUi, setHideUi] = useState(false)
@@ -174,16 +180,19 @@ export default function App() {
     moveCamera,
     setManifest,
     manifest,
+    model,
   } = useContext(SceneContext)
   const { viewMode } = useContext(ViewContext)
 
   effectManager.camera = camera
   effectManager.scene = scene
 
+  screenshotManager.scene = scene
+
   const updateCameraPosition = () => {
     if (!effectManager.camera) return
 
-    if ([ViewMode.BIO, ViewMode.MINT, ViewMode.CHAT].includes(viewMode)) {
+    if ([ViewMode.BIO, ViewMode.CHAT].includes(viewMode)) {
       // auto move camera
       if (viewMode === ViewMode.CHAT) {
         cameraDistance = cameraDistanceChat
@@ -239,7 +248,7 @@ export default function App() {
 
     if (controls) {
       if (
-        [ViewMode.APPEARANCE, ViewMode.SAVE, ViewMode.MINT].includes(viewMode)
+        [ViewMode.APPEARANCE, ViewMode.SAVE].includes(viewMode)
       ) {
         controls.enabled = true
       } else {
@@ -263,6 +272,30 @@ export default function App() {
     })
   }
 
+  const getFaceScreenshot = (width = 256, height = 256, getBlob = false) => {
+    blinkManager.enableScreenshot();
+    model.traverse(o => {
+      if (o.isSkinnedMesh) {
+        const headBone = o.skeleton.bones.filter(bone => bone.name === 'head')[0];
+        headBone.getWorldPosition(localVector3);
+      }
+    });
+    const headPosition = localVector3;
+    const female = templateInfo.name === "Drophunter";
+    const cameraFov = female ? 0.78 : 0.85;
+    screenshotManager.setCamera(headPosition, cameraFov);
+    //let imageName = "AvatarImage_" + Date.now() + ".png";
+
+    //const screenshot = screenshotManager.saveAsImage(imageName);
+    const screenshot = getBlob ? 
+      screenshotManager.getScreenshotBlob(width, height):
+      screenshotManager.getScreenshotTexture(width, height);
+    blinkManager.disableScreenshot();
+    animationManager.disableScreenshot();
+
+    return screenshot;
+  }
+
   // map current app mode to a page
   const pages = {
     [ViewMode.LANDING]: <Landing />,
@@ -280,8 +313,8 @@ export default function App() {
     ),
     [ViewMode.CREATE]: <Create fetchNewModel={fetchNewModel} />,
     [ViewMode.LOAD]: <Load />,
-    // [ViewMode.MINT]: <Mint />,
-    [ViewMode.SAVE]: <Save />,
+    [ViewMode.MINT]: <Mint getFaceScreenshot = {getFaceScreenshot}/>,
+    [ViewMode.SAVE]: <Save getFaceScreenshot = {getFaceScreenshot}/>,
     [ViewMode.CHAT]: <View templateInfo={templateInfo} />,
   }
 

src/components/ExportMenu.jsx

@@ -9,7 +9,7 @@ import { LanguageContext } from "../context/LanguageContext"
 
 const defaultName = "Anon"
 
-export const ExportMenu = () => {
+export const ExportMenu = ({getFaceScreenshot}) => {
   // Translate hook
   const { t } = useContext(LanguageContext);
   const [name] = React.useState(localStorage.getItem("name") || defaultName)
@@ -44,7 +44,8 @@ export const ExportMenu = () => {
         size={14}
         className={styles.button}
         onClick={() => {
-          downloadVRM(model, avatar, name, 4096, true)
+          const screenshot = getFaceScreenshot();
+          downloadVRM(model, avatar, name, screenshot, 4096, true)
         }}
       />
     </React.Fragment>