Creating text in 3D.

package.json

@@ -30,6 +30,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@compai/font-mako": "^0.0.2",
     "svelte-cubed": "^0.2.1",
     "three": "^0.138.3"
   }

src/routes/index.svelte

@@ -1,40 +1,38 @@
 <script>
-  import { fly } from 'svelte/transition';
+  import { onMount } from 'svelte';
-  import Star from '$lib/Star.svelte'
+  import * as SC from 'svelte-cubed';
+  import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
+  import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
+  import typeface from '@compai/font-mako/data/typefaces/mako-normal-400.json';
 
-  let isStar = false;
+  let font;
+  let text = "Level Up";
+  let loader = new FontLoader();
 
-  function hitButton() {
+  onMount(() => {
-    isStar = true;
+    font = loader.parse(typeface);
-    setTimeout(() => {
+  })
-      isStar = false;
-    }, 40);
-  }
 </script>
 
-<header>
+<SC.Canvas alpha>
-  <h1>Star World</h1>
+  <SC.Mesh
-</header>
+    geometry={ new TextGeometry(text, {
+      font,
+      size: 5,
+      height: 10
+    }) }
+  />
+  <SC.PerspectiveCamera position={[ 10, 0, 100 ]} />
+  <SC.OrbitControls />
+</SC.Canvas>
 
-<div style:position="relative">
+<input type="text" bind:value={text} />
-  {#if isStar}
-    <div class="star" out:fly={{ opacity: 0, y: -100, duration: 3000 }}>
-      <Star />
-    </div>
-  {/if}
-  <button on:click={hitButton}>Level Up</button>
-</div>
 
 <style>
-  header {
+  input { 
-    display: flex;
-    font-family: Arial, Helvetica, sans-serif;
-    margin-bottom: 60px;
-  }
-
-  .star {
     position: absolute;
-    top: -30px;
+    top: 0;
-    z-index: -1;
+    left: 0;
+    z-index: 10;
   }
 </style>

src/routes/star.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import Star from '$lib/Star.svelte'
+
+  let isStar = false;
+
+  function hitButton() {
+    isStar = true;
+    setTimeout(() => {
+      isStar = false;
+    }, 40);
+  }
+</script>
+
+<header>
+  <h1>Star World</h1>
+</header>
+
+<div style:position="relative">
+  {#if isStar}
+    <div class="star" out:fly={{ opacity: 0, y: -100, duration: 3000 }}>
+      <Star />
+    </div>
+  {/if}
+  <button on:click={hitButton}>Level Up</button>
+</div>
+
+<style>
+  header {
+    display: flex;
+    font-family: Arial, Helvetica, sans-serif;
+    margin-bottom: 60px;
+  }
+
+  .star {
+    position: absolute;
+    top: -30px;
+    z-index: -1;
+  }
+</style>