SVG Logo in 3D with controls.

src/hooks.ts

@@ -0,0 +1,6 @@
+export async function handle({ event, resolve }) {
+  const response = await resolve(event, {
+    ssr: false
+  });
+  return response;
+}

src/lib/logo.svg

@@ -0,0 +1,7 @@
+<svg width="100%" height="100%" viewBox="0 0 695 241" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M226,12 L226,228 L13,228 L13,12 L226,12 L226,12 Z M238,0 L225.798,0 L12.183,0 L0,0 L0,11.707 L0,228.373 L0,241 L12.183,241 L225.798,241 L238,241 L238,228.373 L238,11.707 L238,0 L238,0 Z" id="Shape" fill="#82D8D8" sketch:type="MSShapeGroup"></path>
+        <path d="M101,161 L101,63.271 L101,57 L94.093,57 L83.42,57 L73,57 L73,61.82 L73,63.271 L73,167.332 L73,174.642 L73,177.598 L73,182 L83.42,182 L94.627,182 L121.842,182 L128,182 L128,174.642 L128,167.871 L128,161 L121.842,161 L101,161 Z" id="Shape" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+        <path d="M182.637,94 L168,94 L168,83.71 L168,79 L166.079,79 L164.564,79 L155.279,79 L150.87,79 L144,79 L144,83.71 L144,94 L134.849,94 L128,94 L128,103.096 L128,110.238 L128,118 L134.849,118 L144,118 L144,130.67 L144,133 L150.87,133 L155.279,133 L164.564,133 L166.079,133 L168,133 L168,130.67 L168,118 L182.637,118 L183,118 L183,110.238 L183,103.096 L183,94 L182.637,94 Z" id="plus" fill="#82D8D8" sketch:type="MSShapeGroup"></path>
+    </g>
+</svg>

src/routes/index.svelte

@@ -1,35 +1,39 @@
 <script>
   import { onMount } from 'svelte';
   import * as SC from 'svelte-cubed';
-  import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
+  import * as THREE from 'three';
-  import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
+  import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
-  import typeface from '@compai/font-mako/data/typefaces/mako-normal-400.json';
+  import logo from '$lib/logo.svg?raw';
 
-  let font;
+  const svgLogo = new SVGLoader().parse(logo);
-  let text = "Level Up";
-  let loader = new FontLoader();
   
-  onMount(() => {
+  let x = Math.PI;
-    font = loader.parse(typeface);
+  let y = 0;
-  })
+  let z = 0;
 </script>
 
 <SC.Canvas alpha>
-  <SC.Mesh
+  <SC.Group scale={0.05} rotation={[x, y, z]}>
-    geometry={ new TextGeometry(text, {
+    {#each svgLogo.paths as logoPath}
-      font,
+      <SC.Mesh
-      size: 5,
+        geometry={new THREE.ExtrudeGeometry(logoPath.toShapes(false), {
-      height: 10
+          depth: 40
-    }) }
+        })}
-  />
+      />
+    {/each}
+  </SC.Group>
   <SC.PerspectiveCamera position={[ 10, 0, 100 ]} />
   <SC.OrbitControls />
 </SC.Canvas>
 
-<input type="text" bind:value={text} />
+<div class="controls">
+  <label for="x">X: <input id="x" name="x" type="range" bind:value={x} min={0} max={5} step={0.01} /></label>
+  <label for="y">Y: <input id="y" name="y" type="range" bind:value={y} min={0} max={5} step={0.01} /></label>
+  <label for="z">Z: <input id="z" name="z" type="range" bind:value={z} min={0} max={5} step={0.01} /></label>
+</div>
 
 <style>
-  input { 
+  .controls { 
     position: absolute;
     top: 0;
     left: 0;

src/routes/text3D.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { onMount } from '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 font;
+  let text = "Level Up";
+  let loader = new FontLoader();
+
+  onMount(() => {
+    font = loader.parse(typeface);
+  })
+</script>
+
+<SC.Canvas alpha>
+  <SC.Mesh
+    geometry={ new TextGeometry(text, {
+      font,
+      size: 5,
+      height: 10
+    }) }
+  />
+  <SC.PerspectiveCamera position={[ 10, 0, 100 ]} />
+  <SC.OrbitControls />
+</SC.Canvas>
+
+<input type="text" bind:value={text} />
+
+<style>
+  input { 
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
+</style>