From fb0fc773bce0c5ae808e6a8867d781e14453c079 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Wed, 8 Oct 2025 01:05:13 +0200
Subject: [PATCH] simple

---
 src/lib/models/cap-mx-switch-15x33.svelte | 11 +++--
 src/lib/models/cherry-mx.svelte           | 13 ++++--
 src/lib/models/lid-2-mx-switches.svelte   | 12 +++--
 src/routes/+page.svelte                   |  4 +-
 src/routes/Scene.svelte                   | 57 ++++-------------------
 5 files changed, 32 insertions(+), 65 deletions(-)

diff --git a/src/lib/models/cap-mx-switch-15x33.svelte b/src/lib/models/cap-mx-switch-15x33.svelte
index cec4dea..8509dc0 100644
--- a/src/lib/models/cap-mx-switch-15x33.svelte
+++ b/src/lib/models/cap-mx-switch-15x33.svelte
@@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco
 
 	import type { Snippet } from 'svelte';
 	import { T, type Props } from '@threlte/core';
-	import { useGltf, useSuspense, useDraco } from '@threlte/extras';
+	import { useGltf, useSuspense, useDraco, Outlines } from '@threlte/extras';
 	import { base } from '$app/paths';
 
 	let {
@@ -44,10 +44,11 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco
 	{#await gltf}
 		{@render fallback?.()}
 	{:then gltf}
-		<T.Mesh
-			geometry={gltf.nodes['switch-cap-15x33'].geometry}
-			material={gltf.nodes['switch-cap-15x33'].material}
-		/>
+    <T.Mesh scale={0.1}>
+      <T is={gltf.nodes['switch-cap-15x33'].geometry} />
+      <T.MeshToonMaterial color="#550000" />
+      <Outlines color="#ff2222" width={2} angle={1} />
+    </T.Mesh>
 	{:catch err}
 		{@render error?.({ error: err })}
 	{/await}
diff --git a/src/lib/models/cherry-mx.svelte b/src/lib/models/cherry-mx.svelte
index 77169ec..e2d461a 100644
--- a/src/lib/models/cherry-mx.svelte
+++ b/src/lib/models/cherry-mx.svelte
@@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 cherry-mx.glb -t -u -T --draco draco
 
 	import type { Snippet } from 'svelte';
 	import { T, type Props } from '@threlte/core';
-	import { useGltf, useSuspense, useDraco } from '@threlte/extras';
+	import { useGltf, useSuspense, useDraco, Edges, Outlines } from '@threlte/extras';
 	import { base } from '$app/paths';
 
 	let {
@@ -44,10 +44,13 @@ Command: npx @threlte/gltf@3.0.1 cherry-mx.glb -t -u -T --draco draco
 	{#await gltf}
 		{@render fallback?.()}
 	{:then gltf}
-		<T.Mesh
-			geometry={gltf.nodes['cherry-mx'].geometry}
-			material={gltf.nodes['cherry-mx'].material}
-		/>
+
+		<T.Mesh scale={0.1}>
+			<T is={gltf.nodes['cherry-mx'].geometry} />
+      <Edges color="white" thresholdAngle={4} scale={1.001} />
+      <T.MeshBasicMaterial color="#000" />
+      <Outlines color="white" width={2} angle={1} />
+		</T.Mesh>
 	{:catch err}
 		{@render error?.({ error: err })}
 	{/await}
diff --git a/src/lib/models/lid-2-mx-switches.svelte b/src/lib/models/lid-2-mx-switches.svelte
index 06ee75c..31d23a3 100644
--- a/src/lib/models/lid-2-mx-switches.svelte
+++ b/src/lib/models/lid-2-mx-switches.svelte
@@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 lid-2-mx-switches.glb -t -u -T --draco draco
 
 	import type { Snippet } from 'svelte';
 	import { T, type Props } from '@threlte/core';
-	import { useGltf, useSuspense, useDraco } from '@threlte/extras';
+	import { useGltf, useSuspense, useDraco, Edges, Outlines } from '@threlte/extras';
 	import { base } from '$app/paths';
 
 	let {
@@ -44,10 +44,12 @@ Command: npx @threlte/gltf@3.0.1 lid-2-mx-switches.glb -t -u -T --draco draco
 	{#await gltf}
 		{@render fallback?.()}
 	{:then gltf}
-		<T.Mesh
-			geometry={gltf.nodes['two-switches-lid'].geometry}
-			material={gltf.nodes['two-switches-lid'].material}
-		/>
+		<T.Mesh scale={0.1}>
+			<T is={gltf.nodes['two-switches-lid'].geometry} />
+			<Edges color="white" thresholdAngle={30} scale={1.001} />
+			<T.MeshToonMaterial color="#313131" />
+			<Outlines color="white" width={2} angle={1} />
+		</T.Mesh>
 	{:catch err}
 		{@render error?.({ error: err })}
 	{/await}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 84e5b35..116030a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -50,8 +50,8 @@
 
 <div class="absolute inset-0 h-full w-full">
 	<Canvas>
-		<Project config={{ state }} name="Project A">
-			<Studio enabled={false} />
+		<Project config={{ state }} name="Plate A">
+			<Studio enabled={true} />
 			<Sheet>
 				<Sequence
 					autoplay
diff --git a/src/routes/Scene.svelte b/src/routes/Scene.svelte
index 7d291a2..6e5d6fb 100644
--- a/src/routes/Scene.svelte
+++ b/src/routes/Scene.svelte
@@ -1,20 +1,14 @@
 <script>
 	import { T } from '@threlte/core';
 
-	import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-	import { useLoader } from '@threlte/core';
-	import { Edges, Grid, OrbitControls, Outlines } from '@threlte/extras';
+	import {  Grid } from '@threlte/extras';
 	import { Vector3 } from 'three';
 	import { SheetObject } from '@threlte/theatre';
-	import { base } from '$app/paths';
 	import RotatableObject from './RotatableObject.svelte';
 	import BaseBin from '../lib/models/base-bin.svelte';
-
-	const lid = useLoader(STLLoader).load(base + '/two-switches-lid.stl');
-
-	const cap = useLoader(STLLoader).load(base + '/switch-cap-15x33.stl');
-
-	const mxSwitch = useLoader(STLLoader).load(base + '/cherry-mx.stl');
+	import CherryMx from '$lib/models/cherry-mx.svelte';
+	import Lid2MxSwitches from '$lib/models/lid-2-mx-switches.svelte';
+	import CapMxSwitch15x33 from '$lib/models/cap-mx-switch-15x33.svelte';
 </script>
 
 
@@ -42,14 +36,7 @@
 		<SheetObject key="Lid">
 			{#snippet children({ Transform })}
 				<Transform>
-					{#if $lid}
-						<T.Mesh scale={0.1} rotation.x={-Math.PI / 2}>
-							<T is={$lid} />
-							<Edges color="white" thresholdAngle={30} scale={1.001} />
-							<T.MeshToonMaterial color="#313131" />
-							<Outlines color="white" width={2} angle={1} />
-						</T.Mesh>
-					{/if}
+					<Lid2MxSwitches />
 				</Transform>
 			{/snippet}
 		</SheetObject>
@@ -57,14 +44,7 @@
 		<SheetObject key="MXSwitch1">
 			{#snippet children({ Transform })}
 				<Transform>
-					{#if $mxSwitch}
-						<T.Mesh scale={0.1} rotation.x={-Math.PI / 2}>
-							<T is={$mxSwitch} />
-							<Edges color="white" thresholdAngle={4} scale={1.001} />
-							<T.MeshBasicMaterial color="#000" />
-							<Outlines color="white" width={2} angle={1} />
-						</T.Mesh>
-					{/if}
+					<CherryMx />
 				</Transform>
 			{/snippet}
 		</SheetObject>
@@ -72,13 +52,7 @@
 		<SheetObject key="Cap1">
 			{#snippet children({ Transform })}
 				<Transform>
-					{#if $cap}
-						<T.Mesh scale={0.1} rotation.x={-Math.PI / 2}>
-							<T is={$cap} />
-							<T.MeshToonMaterial color="#550000" />
-							<Outlines color="#ff2222" width={2} angle={1} />
-						</T.Mesh>
-					{/if}
+					<CapMxSwitch15x33 />
 				</Transform>
 			{/snippet}
 		</SheetObject>
@@ -86,14 +60,7 @@
 		<SheetObject key="MXSwitch2">
 			{#snippet children({ Transform })}
 				<Transform>
-					{#if $mxSwitch}
-						<T.Mesh scale={0.1} rotation.x={-Math.PI / 2}>
-							<T is={$mxSwitch} />
-							<Edges color="white" thresholdAngle={4} scale={1.001} />
-							<T.MeshBasicMaterial color="#000" />
-							<Outlines color="white" width={2} angle={1} />
-						</T.Mesh>
-					{/if}
+					<CherryMx />
 				</Transform>
 			{/snippet}
 		</SheetObject>
@@ -101,13 +68,7 @@
 		<SheetObject key="Cap2">
 			{#snippet children({ Transform })}
 				<Transform>
-					{#if $cap}
-						<T.Mesh scale={0.1} rotation.x={-Math.PI / 2}>
-							<T is={$cap} />
-							<T.MeshToonMaterial color="#550000" />
-							<Outlines color="#ff2222" width={2} angle={1} />
-						</T.Mesh>
-					{/if}
+					<CapMxSwitch15x33 />
 				</Transform>
 			{/snippet}
 		</SheetObject>
-- 
2.51.2