[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte
flo-bit.dev/
portfolio
portfolio-website
svelte
sveltekit
tailwind
threejs
threlte
typescript
Merge pull request #24 from flo-bit/main
env fix
+27
-4
+11
-2
README.md
+11
-2
README.md
···
1
1
# flo-bit portfolio
2
2
3
-
this is my portfolio, created using Svelte, Threlte and TailwindCSS. WIP.
3
+
this is my portfolio, created using sveltekit, threlte, threejs and tailwind. wip.
4
4
5
5
[see it live here](https://flo-bit.github.io/)
6
6
7
-
7
+
[vr version here](https://flo-bit.github.io/vr) (only tested on quest 3)
8
+
9
+
## demos
10
+
11
+
12
+
13
+
https://github.com/flo-bit/flo-bit.github.io/assets/45694132/481296b2-f36d-466c-9741-4dd5771eb306
14
+
15
+
https://github.com/flo-bit/flo-bit.github.io/assets/45694132/a251ab6f-a416-4a2d-905f-8dffb2e36e0f
16
+
+16
-2
src/lib/vr/Scene.svelte
+16
-2
src/lib/vr/Scene.svelte
···
1
1
<script lang="ts">
2
-
import { T } from '@threlte/core';
2
+
import { T, useThrelte } from '@threlte/core';
3
3
import { Environment, interactivity } from '@threlte/extras';
4
4
5
5
import Stars from './components/Stars.svelte';
···
14
14
import Controls from './components/Controls.svelte';
15
15
import Pong from './sections/Pong.svelte';
16
16
17
+
import { HalfFloatType, EquirectangularReflectionMapping, SRGBColorSpace } from 'three';
18
+
19
+
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
20
+
17
21
interactivity();
18
22
pointerControls('left');
19
23
pointerControls('right');
24
+
25
+
const { scene } = useThrelte();
26
+
27
+
const loader = new RGBELoader();
28
+
loader.setDataType(HalfFloatType);
29
+
30
+
loader.load('/shanghai_riverside_1k.hdr', (texture) => {
31
+
texture.mapping = EquirectangularReflectionMapping;
32
+
texture.colorSpace = SRGBColorSpace;
33
+
scene.environment = texture;
34
+
});
20
35
</script>
21
36
22
37
<Controller right />
···
30
45
</T.PerspectiveCamera>
31
46
32
47
<Stars />
33
-
<Environment files="/shanghai_riverside_1k.hdr" />
34
48
35
49
<T.DirectionalLight position={[0, 1, 0]} intensity={0.5} />
36
50