flo-bit.dev
[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
vision pro: env fix
author
Florian
date
(Jul 4, 2024, 12:25 AM +0200)
commit
53acb3c1
53acb3c1069eb3a8613b52fdb7ef994f258d9853
parent
5bd98e04
5bd98e04e43227a85d96e94c22e95db7cfa9102c
+16
-2
+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