flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/one-hour-sushi.
flo-bit.dev/one-hour-sushi/
fixes
author
Florian
date
(May 24, 2025, 8:31 PM +0200)
commit
890bf436
890bf436ff83019417d7b2c3ec8ac1c36f0f79a3
parent
3f94a48d
3f94a48d499b7c503758c47bfae0732a1ddb4429
+51
-22
+3
-3
src/lib/AutoColliderWrapper.svelte
+3
-3
src/lib/AutoColliderWrapper.svelte
···
43
43
44
44
// get median position of the two particles
45
45
const medianPosition = new Vector3(
46
-
(event.targetRigidBody.translation().x + rigidBody.translation().x) / 2,
47
-
(event.targetRigidBody.translation().y + rigidBody.translation().y) / 2,
48
-
(event.targetRigidBody.translation().z + rigidBody.translation().z) / 2
46
+
rigidBody.translation().x,
47
+
rigidBody.translation().y,
48
+
rigidBody.translation().z
49
49
);
50
50
51
51
let lowerIndex = Math.min(index, event.targetRigidBody.userData.index);
+18
-11
src/lib/Ground.svelte
+18
-11
src/lib/Ground.svelte
···
1
1
<script lang="ts">
2
2
import { T } from '@threlte/core';
3
-
import { AutoColliders } from '@threlte/rapier';
3
+
import { AutoColliders, Collider } from '@threlte/rapier';
4
4
</script>
5
5
6
6
<T.Group rotation.y={Math.PI / 2}>
7
7
<T.Group position={[0, -1, 0]}>
8
-
<AutoColliders shape={'cuboid'}>
9
-
<T.Mesh receiveShadow>
10
-
<T.BoxGeometry args={[4, 0.4, 4]} />
11
-
<T.MeshStandardMaterial />
12
-
</T.Mesh>
13
-
</AutoColliders>
8
+
<T.Mesh receiveShadow>
9
+
<T.BoxGeometry args={[4, 0.4, 4]} />
10
+
<T.MeshStandardMaterial />
11
+
</T.Mesh>
12
+
13
+
<T.Group position={[0, -1.8, 0]}>
14
+
<Collider shape={'cuboid'} args={[4, 2, 4]}></Collider>
15
+
</T.Group>
14
16
</T.Group>
15
17
16
18
<!-- walls -->
17
19
<T.Group position={[0, 1, 2]}>
18
-
<AutoColliders shape={'cuboid'}>
19
20
<T.Mesh receiveShadow>
20
21
<T.BoxGeometry args={[4, 4, 0.4]} />
21
22
<T.MeshStandardMaterial />
22
23
</T.Mesh>
23
-
</AutoColliders>
24
+
25
+
<T.Group position={[0, -2, 1.8]}>
26
+
<Collider shape={'cuboid'} args={[4, 4, 2]}></Collider>
27
+
</T.Group>
24
28
</T.Group>
25
29
<T.Group position={[0, 1, -2]}>
26
-
<AutoColliders shape={'cuboid'}>
30
+
27
31
<T.Mesh receiveShadow>
28
32
<T.BoxGeometry args={[4, 4, 0.4]} />
29
33
<T.MeshStandardMaterial />
30
34
</T.Mesh>
31
-
</AutoColliders>
35
+
36
+
<T.Group position={[0, -2, -1.8]}>
37
+
<Collider shape={'cuboid'} args={[4, 4, 2]}></Collider>
38
+
</T.Group>
32
39
</T.Group>
33
40
</T.Group>
+20
-1
src/lib/Scene.svelte
+20
-1
src/lib/Scene.svelte
···
6
6
import Particle from './Particle.svelte';
7
7
import Ground from './Ground.svelte';
8
8
import { game } from './main.svelte';
9
+
import { Audio, AudioListener } from '@threlte/extras';
10
+
import { base } from '$app/paths';
9
11
10
12
interactivity();
13
+
14
+
let x = $state(0);
11
15
</script>
12
16
13
-
<T.OrthographicCamera makeDefault zoom={100} position={[0, 0, 10]} />
17
+
<T.OrthographicCamera makeDefault zoom={100} position={[0, 0, 10]}>
18
+
<AudioListener />
19
+
</T.OrthographicCamera>
14
20
15
21
<!-- <T.PerspectiveCamera makeDefault fov={75} position={[0, 0, 10]}>
16
22
<OrbitControls />
17
23
</T.PerspectiveCamera> -->
18
24
25
+
<Audio autoplay loop src={base + '/audio/music.mp3'} />
26
+
19
27
<T.DirectionalLight position={[0, 10, 10]} castShadow />
20
28
21
29
<Ground />
22
30
<!-- <Debug /> -->
31
+
32
+
<svelte:window onpointermove={(event) => {
33
+
x = ((event.clientX / window.innerWidth) - 0.5) * 3.4;
34
+
}} />
35
+
36
+
37
+
<T.Mesh position={[x, 3, 0]}>
38
+
<T.SphereGeometry args={[0.1, 32, 32]} />
39
+
<T.MeshStandardMaterial color="red" />
40
+
</T.Mesh>
41
+
23
42
24
43
{#each game.particles as particle, index (particle.random)}
25
44
<Particle position={particle.position} rotation={particle.rotation} id={particle.id} {index} />
+10
-7
src/routes/+page.svelte
+10
-7
src/routes/+page.svelte
···
3
3
import Scene from '$lib/Scene.svelte';
4
4
import { Canvas } from '@threlte/core';
5
5
import { World } from '@threlte/rapier';
6
+
import { ACESFilmicToneMapping } from 'three';
6
7
</script>
7
8
8
9
<div class="h-screen w-screen">
9
-
<Canvas>
10
+
<Canvas toneMapping={ACESFilmicToneMapping}>
10
11
<World>
11
12
<Scene />
12
13
</World>
13
14
</Canvas>
14
15
</div>
15
16
16
-
<button
17
-
class="absolute top-0 left-0"
18
-
on:click={() => {
17
+
<svelte:window
18
+
onpointerup={(event) => {
19
+
// get percentage of the screen that was clicked on x
20
+
const x = event.clientX / window.innerWidth;
21
+
19
22
game.particles.push({
20
-
position: [Math.random() * 2 - 1, 3, 0],
23
+
position: [(x - 0.5) * 3.4, 3, 0],
21
24
rotation: [Math.random() * 6, Math.random() * 6, Math.random() * 6],
22
25
id: 0,
23
26
random: Math.random().toString()
24
27
});
25
-
}}>Add Particle</button
26
-
>
28
+
}}
29
+
/>
static/audio/music.mp3
static/audio/music.mp3
This is a binary file and will not be displayed.