[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-creature. three.js journey #16 - tamagotchi
flo-bit.dev/tiny-creature/
more small fixes
+29
-7
+1
-3
src/lib/Creature.svelte
+1
-3
src/lib/Creature.svelte
···
166
166
onMount(async () => {
167
167
addEventListeners();
168
168
169
-
let texturePromise = createTextures();
169
+
await createTextures();
170
170
171
171
const loader = new GLTFLoader();
172
172
173
173
loader.load('/tiny-creature/model.glb', async ({ scene: obj }) => {
174
174
const mesh = obj.getObjectByName('Icosphere');
175
175
if (!(mesh instanceof THREE.SkinnedMesh)) return;
176
-
177
-
await texturePromise;
178
176
179
177
creature = obj;
180
178
+28
-4
src/routes/+page.svelte
+28
-4
src/routes/+page.svelte
···
7
7
import { Tween } from 'svelte/motion';
8
8
import { fromStore } from 'svelte/store';
9
9
import { useProgress } from '@threlte/extras';
10
+
import { onMount } from 'svelte';
10
11
const { progress } = useProgress();
11
12
const p = fromStore(progress);
12
13
const tweenedProgress = Tween.of(() => p.current, {
···
14
15
});
15
16
const progressWidth = $derived(100 * tweenedProgress.current);
16
17
const progressLessThanOne = $derived(tweenedProgress.current < 1);
18
+
19
+
let showSettings = $state(false);
20
+
21
+
onMount(() => {
22
+
window.addEventListener('keydown', (e) => {
23
+
if (e.key === 's') {
24
+
showSettings = !showSettings;
25
+
}
26
+
});
27
+
});
17
28
</script>
18
29
19
30
<div class="h-screen w-screen bg-gradient-to-t from-stone-950 to-stone-900/50">
···
22
33
return new WebGPURenderer({
23
34
canvas,
24
35
antialias: true,
25
-
forceWebGL: false
36
+
forceWebGL: false,
37
+
powerPreference: 'high-performance'
26
38
});
27
39
}}
28
40
>
···
32
44
</Canvas>
33
45
</div>
34
46
35
-
<Pane />
47
+
{#if showSettings}
48
+
<Pane />
49
+
{/if}
36
50
37
51
{#if progressLessThanOne}
38
-
<div class="absolute inset-0 w-full h-full flex items-center justify-start px-10 bg-stone-950">
39
-
<div class="h-10 bg-white rounded-full" style="width: {progressWidth}%"></div>
52
+
<div
53
+
class="absolute inset-0 z-[99999] flex h-full w-full flex-col items-center justify-center bg-stone-950 px-10 text-xl font-semibold text-white"
54
+
>
55
+
<div class="w-full max-w-xl">
56
+
spawning a wigglepuff...
57
+
<div class="relative mt-4 h-2 w-full rounded-full bg-white/10">
58
+
<div
59
+
class="absolute inset-0 h-full rounded-full bg-white"
60
+
style="width: {progressWidth}%"
61
+
></div>
62
+
</div>
63
+
</div>
40
64
</div>
41
65
{/if}