[READ-ONLY] Mirror of https://github.com/flo-bit/buttfinity-showcase. buttfinity showcase website made with threlte
flo-bit.dev/buttfinity-showcase/
commit
+53
-32
+7
-5
src/lib/models/cap-mx-switch-15x15.svelte
+7
-5
src/lib/models/cap-mx-switch-15x15.svelte
···
50
50
});
51
51
52
52
function onPointerDown(evt: any) {
53
+
evt.stopPropagation();
53
54
console.log('onPointerDown');
54
55
55
56
movementSpring.set(-0.2);
···
58
59
}, 200);
59
60
}
60
61
61
-
function onPointerUp() {
62
+
function onPointerUp(evt: any) {
63
+
evt.stopPropagation();
62
64
console.log('onPointerUp');
63
65
64
66
movementSpring.set(0);
···
73
75
scale={0.1}
74
76
position.y={movement}
75
77
onpointerdown={(evt: any) => {
76
-
onPointerDown(evt.nativeEvent);
78
+
onPointerDown(evt);
77
79
}}
78
80
onpointerleave={() => {
79
81
onPointerLeave();
···
82
84
onPointerEnter();
83
85
}}
84
86
ontouchstart={(evt: any) => {
85
-
onPointerDown(evt.nativeEvent);
87
+
onPointerDown(evt);
86
88
}}
87
-
ontouchend={() => {
88
-
onPointerUp();
89
+
ontouchend={(evt: any) => {
90
+
onPointerUp(evt);
89
91
}}
90
92
>
91
93
<T is={gltf.nodes['cap-mx-switch-15x15'].geometry} />
+7
-5
src/lib/models/cap-mx-switch-15x33.svelte
+7
-5
src/lib/models/cap-mx-switch-15x33.svelte
···
50
50
});
51
51
52
52
function onPointerDown(evt: any) {
53
+
evt.stopPropagation();
53
54
console.log('onPointerDown');
54
55
55
56
movementSpring.set(-0.2);
···
58
59
}, 200);
59
60
}
60
61
61
-
function onPointerUp() {
62
+
function onPointerUp(evt: any) {
63
+
evt.stopPropagation();
62
64
console.log('onPointerUp');
63
65
64
66
movementSpring.set(0);
···
73
75
scale={0.1}
74
76
position.y={movement}
75
77
onpointerdown={(evt: any) => {
76
-
onPointerDown(evt.nativeEvent);
78
+
onPointerDown(evt);
77
79
}}
78
80
onpointerleave={() => {
79
81
// sizeSpring.set(1.5);
···
84
86
onPointerEnter();
85
87
}}
86
88
ontouchstart={(evt: any) => {
87
-
onPointerDown(evt.nativeEvent);
89
+
onPointerDown(evt);
88
90
}}
89
-
ontouchend={() => {
90
-
onPointerUp();
91
+
ontouchend={(evt: any) => {
92
+
onPointerUp(evt);
91
93
}}
92
94
>
93
95
<T is={gltf.nodes['switch-cap-15x33'].geometry} />
+5
-5
src/routes/+page.svelte
+5
-5
src/routes/+page.svelte
···
13
13
</p>
14
14
15
15
<h1
16
-
class="mt-3 text-5xl lowercase font-thin tracking-tight text-pretty text-zinc-900 sm:text-7xl dark:text-white"
16
+
class="mt-3 text-5xl lowercase font-thin tracking-tight text-pretty sm:text-7xl text-white"
17
17
>
18
18
Buttons + Gridfinity
19
19
</h1>
20
20
21
-
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-zinc-600 dark:text-zinc-400 border-l border-zinc-900">
21
+
<dl class="mt-10 max-w-xl space-y-8 text-base/7 text-zinc-400 border-l border-zinc-900">
22
22
<div class="ml-8 pt-4">
23
-
<dt class="font-semibold text-zinc-900 tracking-tighter dark:text-white uppercase relative pl-9">
23
+
<dt class="font-semibold tracking-tighter text-white uppercase relative pl-9">
24
24
25
25
<svg xmlns="http://www.w3.org/2000/svg" data-slot="icon" aria-hidden="true" class="absolute top-1 left-1 size-5 text-rose-500" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/></svg>
26
26
Macropad
···
29
29
</div>
30
30
<div class="border-t border-zinc-900 -ml-4"> </div>
31
31
<div class="ml-8">
32
-
<dt class="font-semibold text-zinc-900 tracking-tighter dark:text-white uppercase relative pl-9">
32
+
<dt class="font-semibold tracking-tighter text-white uppercase relative pl-9">
33
33
34
34
<svg xmlns="http://www.w3.org/2000/svg" data-slot="icon" aria-hidden="true" class="absolute top-1 left-1 size-5 text-rose-500" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 18v-5.25m0 0a6 6 0 0 0 1.5-.189m-1.5.189a6 6 0 0 1-1.5-.189m3.75 7.478a12.1 12.1 0 0 1-4.5 0m3.75 2.383a14.4 14.4 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg>
35
35
Smart home
···
38
38
</div>
39
39
<div class="border-t border-zinc-900 -ml-4"> </div>
40
40
<div class="ml-8 pb-4">
41
-
<dt class="font-semibold text-zinc-900 tracking-tighter dark:text-white uppercase relative pl-9">
41
+
<dt class="font-semibold tracking-tighter text-white uppercase relative pl-9">
42
42
43
43
<svg xmlns="http://www.w3.org/2000/svg" data-slot="icon" aria-hidden="true" class="absolute top-1 left-1 size-5 text-rose-500" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="m9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163m0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553"/></svg>
44
44
Music
+2
-14
src/routes/RotatableObject.svelte
+2
-14
src/routes/RotatableObject.svelte
···
10
10
let size = 1.5;
11
11
let sizeSpring = spring<number>(size, 0.1, 0.5);
12
12
13
-
let distance = 4;
14
13
const maxSpeed = 0.03;
15
14
const acceleration = 0.0002;
16
15
const damping = 0.98;
···
98
97
99
98
const { renderer } = useThrelte();
100
99
101
-
function onResize() {
102
-
if (window.innerWidth < 750) {
103
-
distance = 8;
104
-
} else {
105
-
distance = 5;
106
-
}
107
-
}
108
-
109
100
onMount(() => {
110
101
const canvas = renderer.domElement;
111
102
112
-
onResize();
113
-
114
103
canvas.addEventListener('pointermove', onPointerMove, { passive: false });
115
104
canvas.addEventListener('pointerup', onPointerUp, false);
116
105
canvas.addEventListener('touchmove', onPointerMove, { passive: false });
117
106
canvas.addEventListener('touchend', onPointerUp, false);
118
-
window.addEventListener('resize', onResize);
119
107
120
108
return () => {
121
109
canvas.removeEventListener('pointermove', onPointerMove, false);
122
110
canvas.removeEventListener('pointerup', onPointerUp, false);
123
111
canvas.removeEventListener('touchmove', onPointerMove, false);
124
112
canvas.removeEventListener('touchend', onPointerUp, false);
125
-
window.removeEventListener('resize', onResize);
126
113
};
127
114
});
128
115
</script>
···
147
134
ontouchend={() => {
148
135
onPointerUp();
149
136
}}
137
+
position.y={0.75}
150
138
>
151
-
<T.BoxGeometry args={[7, 4, 11]} />
139
+
<T.BoxGeometry args={[4.2, 1.5, 6.3]} />
152
140
<T.MeshBasicMaterial />
153
141
</T.Mesh>
154
142
+32
-3
src/routes/Scene.svelte
+32
-3
src/routes/Scene.svelte
···
19
19
import CapMxSwitch15x15 from '$lib/models/cap-mx-switch-15x15.svelte';
20
20
import CapSlider from '$lib/models/cap-slider.svelte';
21
21
import CapRotaryEncoder from '$lib/models/cap-rotary-encoder.svelte';
22
+
import { onMount } from 'svelte';
22
23
interactivity();
24
+
25
+
26
+
let distance = $state(1);
27
+
let down = $state(-2)
28
+
29
+
function onResize() {
30
+
if (window.innerWidth < 750) {
31
+
distance = 2;
32
+
down = -5;
33
+
} else {
34
+
distance = 1;
35
+
down = -2;
36
+
}
37
+
}
38
+
39
+
40
+
onMount(() => {
41
+
42
+
onResize();
43
+
44
+
window.addEventListener('resize', onResize);
45
+
46
+
return () => {
47
+
window.removeEventListener('resize', onResize);
48
+
};
49
+
});
23
50
</script>
24
51
25
52
26
-
<T.PerspectiveCamera makeDefault position={[10, 10, 10]} near={0.1} far={100} oncreate={(ref) => {
53
+
<T.PerspectiveCamera makeDefault position={[10 * distance, 5 * distance, 10 * distance]} near={0.1} far={100} oncreate={(ref) => {
27
54
ref.lookAt(0, 1, 0)
28
55
}}>
29
56
<!-- <OrbitControls /> -->
30
57
</T.PerspectiveCamera>
31
58
59
+
<T.Group position.y={down}>
32
60
<RotatableObject>
33
61
34
-
<T.Group position.y={-2} scale={0.6}>
62
+
<T.Group scale={0.5}>
35
63
36
64
37
65
<SheetObject key="Baseplate">
···
225
253
</T.Group>
226
254
227
255
228
-
</RotatableObject>
256
+
</RotatableObject>
257
+
</T.Group>