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} - + + + + + {: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} - + + + + + + + {: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} - + + + + + + {: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 @@
- - + + 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'; @@ -42,14 +36,7 @@ {#snippet children({ Transform })} - {#if $lid} - - - - - - - {/if} + {/snippet} @@ -57,14 +44,7 @@ {#snippet children({ Transform })} - {#if $mxSwitch} - - - - - - - {/if} + {/snippet} @@ -72,13 +52,7 @@ {#snippet children({ Transform })} - {#if $cap} - - - - - - {/if} + {/snippet} @@ -86,14 +60,7 @@ {#snippet children({ Transform })} - {#if $mxSwitch} - - - - - - - {/if} + {/snippet} @@ -101,13 +68,7 @@ {#snippet children({ Transform })} - {#if $cap} - - - - - - {/if} + {/snippet}