diff --git a/src/app.html b/src/app.html index 815a9c6..e27da37 100644 --- a/src/app.html +++ b/src/app.html @@ -5,7 +5,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/routes/Utils.ts b/src/lib/Utils.ts similarity index 100% rename from src/routes/Utils.ts rename to src/lib/Utils.ts diff --git a/src/lib/models/base-bin-2x1.svelte b/src/lib/models/base-bin-2x1.svelte index d6afe15..7753c79 100644 --- a/src/lib/models/base-bin-2x1.svelte +++ b/src/lib/models/base-bin-2x1.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 base-bin-2x1.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 base-bin-2x1.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/base-bin-3u.svelte b/src/lib/models/base-bin-3u.svelte index cda97c3..faa31a7 100644 --- a/src/lib/models/base-bin-3u.svelte +++ b/src/lib/models/base-bin-3u.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 base-bin-3u.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 base-bin-3u.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/base-bin.svelte b/src/lib/models/base-bin.svelte index 7a235eb..d560b2b 100644 --- a/src/lib/models/base-bin.svelte +++ b/src/lib/models/base-bin.svelte @@ -47,7 +47,7 @@ Command: npx @threlte/gltf@3.0.1 base-bin.gltf -t -u -T --draco draco1234 - + {:catch err} diff --git a/src/lib/models/baseplate.svelte b/src/lib/models/baseplate.svelte index b985d46..7c2aef0 100644 --- a/src/lib/models/baseplate.svelte +++ b/src/lib/models/baseplate.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 baseplate.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 baseplate.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/bin-esp32.svelte b/src/lib/models/bin-esp32.svelte index d3174a8..265b042 100644 --- a/src/lib/models/bin-esp32.svelte +++ b/src/lib/models/bin-esp32.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 bin-esp32.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 bin-esp32.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/cap-mx-switch-15x15.svelte b/src/lib/models/cap-mx-switch-15x15.svelte index fcaccfe..01a8025 100644 --- a/src/lib/models/cap-mx-switch-15x15.svelte +++ b/src/lib/models/cap-mx-switch-15x15.svelte @@ -7,9 +7,12 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x15.glb -t -u -T --draco draco import type * as THREE from 'three'; import type { Snippet } from 'svelte'; - import { T, type Props } from '@threlte/core'; - import { useGltf, useSuspense, useDraco } from '@threlte/extras'; + import { T, useTask, type Props } from '@threlte/core'; + import { useGltf, useSuspense, useDraco, Outlines, useCursor } from '@threlte/extras'; import { base } from '$app/paths'; + import { spring } from '$lib/Utils'; + + const { onPointerEnter, onPointerLeave } = useCursor(); let { fallback, @@ -38,6 +41,28 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x15.glb -t -u -T --draco draco dracoLoader: useDraco(base + '/draco/') }) ); + + let movementSpring = spring(0, 0.2, 0.8); + let movement = $state(0); + + useTask((delta) => { + movement = movementSpring.update(delta); + }); + + function onPointerDown(evt: any) { + console.log('onPointerDown'); + + movementSpring.set(-0.2); + setTimeout(() => { + movementSpring.set(0); + }, 200); + } + + function onPointerUp() { + console.log('onPointerUp'); + + movementSpring.set(0); + } @@ -45,9 +70,28 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x15.glb -t -u -T --draco draco {@render fallback?.()} {:then gltf} + scale={0.1} + position.y={movement} + onpointerdown={(evt: any) => { + onPointerDown(evt.nativeEvent); + }} + onpointerleave={() => { + onPointerLeave(); + }} + onpointerenter={() => { + onPointerEnter(); + }} + ontouchstart={(evt: any) => { + onPointerDown(evt.nativeEvent); + }} + ontouchend={() => { + onPointerUp(); + }} + > + + + + {:catch err} {@render error?.({ error: err })} {/await} diff --git a/src/lib/models/cap-mx-switch-15x33.svelte b/src/lib/models/cap-mx-switch-15x33.svelte index 8509dc0..195e0f5 100644 --- a/src/lib/models/cap-mx-switch-15x33.svelte +++ b/src/lib/models/cap-mx-switch-15x33.svelte @@ -7,9 +7,12 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco import type * as THREE from 'three'; import type { Snippet } from 'svelte'; - import { T, type Props } from '@threlte/core'; - import { useGltf, useSuspense, useDraco, Outlines } from '@threlte/extras'; + import { T, useTask, type Props } from '@threlte/core'; + import { useGltf, useSuspense, useDraco, Outlines, useCursor } from '@threlte/extras'; import { base } from '$app/paths'; + import { spring } from '$lib/Utils'; + + const { onPointerEnter, onPointerLeave } = useCursor(); let { fallback, @@ -38,17 +41,59 @@ Command: npx @threlte/gltf@3.0.1 cap-mx-switch-15x33.glb -t -u -T --draco draco dracoLoader: useDraco(base + '/draco/') }) ); + + let movementSpring = spring(0, 0.2, 0.8); + let movement = $state(0); + + useTask((delta) => { + movement = movementSpring.update(delta); + }); + + function onPointerDown(evt: any) { + console.log('onPointerDown'); + + movementSpring.set(-0.2); + setTimeout(() => { + movementSpring.set(0); + }, 200); + } + + function onPointerUp() { + console.log('onPointerUp'); + + movementSpring.set(0); + } {#await gltf} {@render fallback?.()} {:then gltf} - - - - - + { + onPointerDown(evt.nativeEvent); + }} + onpointerleave={() => { + // sizeSpring.set(1.5); + onPointerLeave(); + }} + onpointerenter={() => { + // sizeSpring.set(1.6); + onPointerEnter(); + }} + ontouchstart={(evt: any) => { + onPointerDown(evt.nativeEvent); + }} + ontouchend={() => { + onPointerUp(); + }} + > + + + + {:catch err} {@render error?.({ error: err })} {/await} diff --git a/src/lib/models/cap-rotary-encoder.svelte b/src/lib/models/cap-rotary-encoder.svelte index a736513..87f3014 100644 --- a/src/lib/models/cap-rotary-encoder.svelte +++ b/src/lib/models/cap-rotary-encoder.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 cap-rotary-encoder.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-rotary-encoder.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/cap-slider.svelte b/src/lib/models/cap-slider.svelte index a242dbb..67b8d2c 100644 --- a/src/lib/models/cap-slider.svelte +++ b/src/lib/models/cap-slider.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 cap-slider.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-slider.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 31d23a3..a0f1328 100644 --- a/src/lib/models/lid-2-mx-switches.svelte +++ b/src/lib/models/lid-2-mx-switches.svelte @@ -47,7 +47,7 @@ Command: npx @threlte/gltf@3.0.1 lid-2-mx-switches.glb -t -u -T --draco draco - + {:catch err} diff --git a/src/lib/models/lid-4-mx-switches.svelte b/src/lib/models/lid-4-mx-switches.svelte index e67fc36..3315c2d 100644 --- a/src/lib/models/lid-4-mx-switches.svelte +++ b/src/lib/models/lid-4-mx-switches.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 lid-4-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-4-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/lib/models/lid-rotary-encoder.svelte b/src/lib/models/lid-rotary-encoder.svelte index 3ed154f..afd321f 100644 --- a/src/lib/models/lid-rotary-encoder.svelte +++ b/src/lib/models/lid-rotary-encoder.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 lid-rotary-encoder.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,14 @@ Command: npx @threlte/gltf@3.0.1 lid-rotary-encoder.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-slider.svelte b/src/lib/models/lid-slider.svelte index 7464478..e030de9 100644 --- a/src/lib/models/lid-slider.svelte +++ b/src/lib/models/lid-slider.svelte @@ -8,7 +8,7 @@ Command: npx @threlte/gltf@3.0.1 lid-slider.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,14 @@ Command: npx @threlte/gltf@3.0.1 lid-slider.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 116030a..b9353e1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -51,7 +51,7 @@
- + import { T, useTask, useThrelte } from '@threlte/core'; - import { interactivity, useCursor } from '@threlte/extras'; + import { useCursor } from '@threlte/extras'; import { Quaternion, Euler, Vector2, Group } from 'three'; import { onMount } from 'svelte'; - import { spring } from './Utils'; + import { spring } from '$lib/Utils'; const { onPointerEnter, onPointerLeave } = useCursor(); - interactivity(); let size = 1.5; let sizeSpring = spring(size, 0.1, 0.5); @@ -149,7 +148,7 @@ onPointerUp(); }} > - + diff --git a/src/routes/Scene.svelte b/src/routes/Scene.svelte index 6e5d6fb..8e68cf8 100644 --- a/src/routes/Scene.svelte +++ b/src/routes/Scene.svelte @@ -1,7 +1,7 @@ @@ -19,13 +30,23 @@ - + + + + + + {#snippet children({ Transform })} + + + + {/snippet} + - + {#snippet children({ Transform })} @@ -33,46 +54,167 @@ {/snippet} - + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + {#snippet children({ Transform })} - + {/snippet} - + {#snippet children({ Transform })} - + {/snippet} - + {#snippet children({ Transform })} - + {/snippet} - + {#snippet children({ Transform })} - + {/snippet} - + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} - + {/snippet} + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + + + + {#snippet children({ Transform })} + + + + {/snippet} + + + +