feat: added icons of certain tools

src/routes/tools/+page.svelte

@@ -4,6 +4,8 @@
 	import { T } from '@threlte/core';
 	import { ContactShadows, Float, Grid, OrbitControls } from '@threlte/extras';
 	import Github from './Github.svelte';
+	import TerraformFlat from './TerraformFlat.svelte';
+	import Kubernetes from './Kubernetes.svelte';
 </script>
 
 <svelte:head>
@@ -13,18 +15,18 @@
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">Tools</h2>
 
-	<Canvas size={{ width: 800, height: 800 }}>
-		<T.PerspectiveCamera makeDefault position={[-10, 10, 40]} fov={15}>
+	<Canvas>
+		<T.PerspectiveCamera makeDefault position={[-10, 10, 30]} fov={15}>
 			<OrbitControls
 				autoRotate
 				enableZoom={false}
 				enableDamping
-				autoRotateSpeed={0.5}
+				autoRotateSpeed={0.2}
 				target.y={3}
 			/>
 		</T.PerspectiveCamera>
 
-		<T.DirectionalLight intensity={0.8} position.x={5} position.y={10} />
+		<T.DirectionalLight intensity={0.5} position.x={5} position.y={10} />
 		<T.AmbientLight intensity={0.2} />
 
 		<Grid
@@ -32,32 +34,22 @@
 			cellColor="#ffffff"
 			sectionColor="#ffffff"
 			sectionThickness={0}
-			fadeDistance={50}
+			fadeDistance={40}
 			cellSize={2}
 		/>
 
 		<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
 
 		<Float floatIntensity={1} floatingRange={[0, 1]}>
-			<T.Mesh position.y={1.2} position.z={-0.75}>
-				<T.BoxGeometry />
-				<T.MeshStandardMaterial color={[0.2, 0.2, 0.5]} />
-			</T.Mesh>
+			<Github position.y={0.4} position.z={-0.75} scale={50} />
 		</Float>
 
 		<Float floatIntensity={1} floatingRange={[0, 1]}>
-			<T.Mesh position={[1.2, 1.5, 0.75]} rotation.x={5} rotation.y={71}>
-				<T.TorusKnotGeometry args={[0.5, 0.15, 100, 12, 2, 3]} />
-				<T.MeshStandardMaterial color={[0.5, 0.9, 0.5]} />
-			</T.Mesh>
+			<TerraformFlat position.y={0.4} position.z={-4} scale={10} />
 		</Float>
 
 		<Float floatIntensity={1} floatingRange={[0, 1]}>
-			<!-- <T.Mesh position={[-1.4, 1.5, 0.75]} rotation={[-5, 128, 10]}>
-				<T.IcosahedronGeometry />
-				<T.MeshStandardMaterial color={[0.2, 0.9, 0.8]} />
-			</T.Mesh> -->
-			<Github />
+			<Kubernetes position.y={0.4} position.z={-2} position.x={-3} scale={100} />
 		</Float>
 	</Canvas>
 </main>

src/routes/tools/Github.svelte

@@ -1,6 +1,6 @@
 <!--
 Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
-Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb
+Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --transform
 -->
 
 <script>
@@ -10,7 +10,7 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb
 
   export const ref = new Group()
 
-  const gltf = useGltf('/src/lib/assets/vectors/github.glb')
+  const gltf = useGltf('/models/github-transformed.glb', { useDraco: true })
 
   const component = forwardEventHandlers()
 </script>

src/routes/tools/Kubernetes.svelte

@@ -0,0 +1,37 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transform
+-->
+
+<script>
+  import { Group } from 'three'
+  import { T, forwardEventHandlers } from '@threlte/core'
+  import { useGltf } from '@threlte/extras'
+
+  export const ref = new Group()
+
+  const gltf = useGltf('/models/kubernetes-transformed.glb', { useDraco: true })
+
+  const component = forwardEventHandlers()
+</script>
+
+<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
+  {#await gltf}
+    <slot name="fallback" />
+  {:then gltf}
+    <T.Mesh
+      geometry={gltf.nodes.Curve.geometry}
+      material={gltf.materials['SVGMat.006']}
+      rotation={[Math.PI / 2, 0, 0]}
+    />
+    <T.Mesh
+      geometry={gltf.nodes.Curve001.geometry}
+      material={gltf.materials['SVGMat.007']}
+      rotation={[Math.PI / 2, 0, 0]}
+    />
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
+
+  <slot {ref} />
+</T>

src/routes/tools/TerraformFlat.svelte

@@ -0,0 +1,31 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.glb --transform
+-->
+
+<script>
+  import { Group } from 'three'
+  import { T, forwardEventHandlers } from '@threlte/core'
+  import { useGltf } from '@threlte/extras'
+
+  export const ref = new Group()
+
+  const gltf = useGltf('/models/terraform-flat-transformed.glb', { useDraco: true })
+
+  const component = forwardEventHandlers()
+</script>
+
+<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
+  {#await gltf}
+    <slot name="fallback" />
+  {:then gltf}
+    <T.Group rotation={[Math.PI / 2, 0, 5]}>
+      <T.Mesh geometry={gltf.nodes.Curve_1.geometry} material={gltf.materials.SVGMat} />
+      <T.Mesh geometry={gltf.nodes.Curve_2.geometry} material={gltf.materials['SVGMat.001']} />
+    </T.Group>
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
+
+  <slot {ref} />
+</T>