[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 #14 from flo-bit/main
small fixes
+29
-125
+16
-16
package-lock.json
+16
-16
package-lock.json
···
5
5
"requires": true,
6
6
"packages": {
7
7
"": {
8
-
"name": "portfolio",
8
+
"name": "flobitportfolio",
9
9
"version": "0.0.1",
10
10
"dependencies": {
11
11
"@melt-ui/pp": "^0.3.0",
···
1535
1535
}
1536
1536
},
1537
1537
"node_modules/@threlte/extras": {
1538
-
"version": "8.1.1",
1539
-
"resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-8.1.1.tgz",
1540
-
"integrity": "sha512-F6KbEwSCIl06qxuZtqcWakipIek85bnl3gFImO+dsTpTaXpd2fJorEoreDfO8rjXQERoSbXAJpYE9SwmaLnLhQ==",
1538
+
"version": "8.4.0",
1539
+
"resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-8.4.0.tgz",
1540
+
"integrity": "sha512-JlvJUAdG9UsqPhJpk6aMF1XtSdWwRyPjhpsXsqrX6SVfge58n1KLnllbuw1hEYzrMJJC1CHZUrilbh08zDokYw==",
1541
1541
"dev": true,
1542
1542
"dependencies": {
1543
-
"troika-three-text": "^0.47.2"
1543
+
"troika-three-text": "^0.49.0"
1544
1544
},
1545
1545
"peerDependencies": {
1546
1546
"svelte": ">=4",
···
4652
4652
}
4653
4653
},
4654
4654
"node_modules/troika-three-text": {
4655
-
"version": "0.47.2",
4656
-
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.47.2.tgz",
4657
-
"integrity": "sha512-qylT0F+U7xGs+/PEf3ujBdJMYWbn0Qci0kLqI5BJG2kW1wdg4T1XSxneypnF05DxFqJhEzuaOR9S2SjiyknMng==",
4655
+
"version": "0.49.0",
4656
+
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.49.0.tgz",
4657
+
"integrity": "sha512-sn9BNC6eIX8OO3iAkPwjecJ7Pn21Ve8P1UNFMNeQzXx759rrqS4i4pSZs7FLMYdWyCKVXBFGimBySFwRKLjq/Q==",
4658
4658
"dev": true,
4659
4659
"dependencies": {
4660
4660
"bidi-js": "^1.0.2",
4661
-
"troika-three-utils": "^0.47.2",
4662
-
"troika-worker-utils": "^0.47.2",
4661
+
"troika-three-utils": "^0.49.0",
4662
+
"troika-worker-utils": "^0.49.0",
4663
4663
"webgl-sdf-generator": "1.1.1"
4664
4664
},
4665
4665
"peerDependencies": {
···
4667
4667
}
4668
4668
},
4669
4669
"node_modules/troika-three-utils": {
4670
-
"version": "0.47.2",
4671
-
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.47.2.tgz",
4672
-
"integrity": "sha512-/28plhCxfKtH7MSxEGx8e3b/OXU5A0xlwl+Sbdp0H8FXUHKZDoksduEKmjQayXYtxAyuUiCRunYIv/8Vi7aiyg==",
4670
+
"version": "0.49.0",
4671
+
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.49.0.tgz",
4672
+
"integrity": "sha512-umitFL4cT+Fm/uONmaQEq4oZlyRHWwVClaS6ZrdcueRvwc2w+cpNQ47LlJKJswpqtMFWbEhOLy0TekmcPZOdYA==",
4673
4673
"dev": true,
4674
4674
"peerDependencies": {
4675
4675
"three": ">=0.125.0"
4676
4676
}
4677
4677
},
4678
4678
"node_modules/troika-worker-utils": {
4679
-
"version": "0.47.2",
4680
-
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.47.2.tgz",
4681
-
"integrity": "sha512-mzss4MeyzUkYBppn4x5cdAqrhBHFEuVmMMgLMTyFV23x6GvQMyo+/R5E5Lsbrt7WSt5RfvewjcwD1DChRTA9lA==",
4679
+
"version": "0.49.0",
4680
+
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.49.0.tgz",
4681
+
"integrity": "sha512-1xZHoJrG0HFfCvT/iyN41DvI/nRykiBtHqFkGaGgJwq5iXfIZFBiPPEHFpPpgyKM3Oo5ITHXP5wM2TNQszYdVg==",
4682
4682
"dev": true
4683
4683
},
4684
4684
"node_modules/ts-api-utils": {
+1
-92
src/lib/3D/PlanetModel.svelte
+1
-92
src/lib/3D/PlanetModel.svelte
···
2
2
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
3
3
Command: npx @threlte/gltf@2.0.1 static/planet.gltf -t -T
4
4
-->
5
-
6
5
<script lang="ts">
7
6
import * as THREE from 'three';
8
7
import { Group } from 'three';
9
8
import { T, type Props, type Events, type Slots, forwardEventHandlers } from '@threlte/core';
10
-
import { useGltf, useTexture } from '@threlte/extras';
9
+
import { useGltf } from '@threlte/extras';
11
10
12
11
import FakeGlowMaterial from './FakeGlowMaterial/FakeGlowMaterial.svelte';
13
12
···
28
27
const gltf = useGltf<GLTFResult>('/planet-transformed.glb', { useDraco: true });
29
28
30
29
const component = forwardEventHandlers();
31
-
32
-
var vertexShader = [
33
-
'varying vec3 vVertexWorldPosition;',
34
-
'varying vec3 vVertexNormal;',
35
-
36
-
'varying vec4 vFragColor;',
37
-
38
-
'void main(){',
39
-
' vVertexNormal = normalize(normalMatrix * normal);',
40
-
' vVertexWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;',
41
-
' // set gl_Position',
42
-
' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
43
-
'}'
44
-
].join('\n');
45
-
var fragmentShader = [
46
-
'uniform vec3 glowColor;',
47
-
'uniform float coeficient;',
48
-
'uniform float power;',
49
-
50
-
'varying vec3 vVertexNormal;',
51
-
'varying vec3 vVertexWorldPosition;',
52
-
53
-
'varying vec4 vFragColor;',
54
-
55
-
'void main(){',
56
-
' vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;',
57
-
' vec3 viewCameraToVertex = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',
58
-
' viewCameraToVertex = normalize(viewCameraToVertex);',
59
-
' float intensity = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
60
-
' gl_FragColor = vec4(glowColor, intensity * 0.8);',
61
-
'}'
62
-
].join('\n');
63
-
64
-
// create custom material from the shader code above
65
-
// that is within specially labeled script tags
66
-
var material2 = new THREE.ShaderMaterial({
67
-
uniforms: {
68
-
coeficient: {
69
-
value: 0.45
70
-
},
71
-
power: {
72
-
value: 6
73
-
},
74
-
glowColor: {
75
-
value: new THREE.Color(0xa5f3fc)
76
-
}
77
-
},
78
-
vertexShader: vertexShader,
79
-
fragmentShader: fragmentShader,
80
-
transparent: true
81
-
});
82
-
83
-
const material = new THREE.MeshStandardMaterial();
84
-
material.onBeforeCompile = (shader) => {
85
-
shader.vertexShader = `varying vec3 vPos;\n${shader.vertexShader}`;
86
-
shader.vertexShader = shader.vertexShader.replace(
87
-
`#include <begin_vertex>`,
88
-
`#include <begin_vertex>\nvPos = (modelViewMatrix * vec4(transformed, 1.0)).xyz;`
89
-
);
90
-
91
-
shader.fragmentShader = `varying vec3 vPos;\n${shader.fragmentShader}`;
92
-
93
-
shader.fragmentShader = shader.fragmentShader.replace(
94
-
'vec4 diffuseColor = vec4( diffuse, opacity );',
95
-
`vec3 viewDirection = normalize(-vPos);
96
-
float angle = pow(0.8 - abs(dot(viewDirection, vNormal)), 3.0);
97
-
vec4 diffuseColor = vec4(diffuse, opacity * angle);`
98
-
);
99
-
};
100
-
101
-
// let map = useTexture('/night.jpg', {
102
-
// transform: (texture) => {
103
-
// //texture.encoding = THREE.LinearEncoding;
104
-
// return texture;
105
-
// }
106
-
// });
107
30
</script>
108
31
109
32
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
···
134
57
135
58
<slot {ref} />
136
59
</T>
137
-
138
-
<!-- {#await map then texture}
139
-
140
-
<T.Mesh is={ref} dispose={false} {...$$restProps} bind:this={$component}>
141
-
<T.IcosahedronGeometry args={[1, 20, 3]} />
142
-
<T.MeshStandardMaterial transparent={true} color={'white'} opacity={1.0} map={texture}/>
143
-
144
-
<T.Mesh scale={1.15}>
145
-
<T.SphereGeometry args={[1, 32, 32]} />
146
-
<T is={material2} side={THREE.BackSide} />
147
-
</T.Mesh>
148
-
</T.Mesh>
149
-
150
-
{/await} -->
+9
-17
src/lib/3D/Scene.svelte
+9
-17
src/lib/3D/Scene.svelte
···
1
1
<script lang="ts">
2
2
import { T, useTask, useThrelte } from '@threlte/core';
3
-
import { Color } from 'three';
4
3
import { interactivity, useCursor } from '@threlte/extras';
5
-
interactivity();
6
-
7
-
const { hovering, onPointerEnter, onPointerLeave } = useCursor()
4
+
import { Color } from 'three';
5
+
import { onMount } from 'svelte';
6
+
import { spring } from 'svelte/motion';
8
7
9
8
import Stars from './Stars.svelte';
10
-
import { onMount } from 'svelte';
11
9
import PlanetModel from './PlanetModel.svelte';
12
10
import Nebula from './Nebula.svelte';
13
11
14
-
import { spring } from 'svelte/motion';
12
+
const { onPointerEnter, onPointerLeave } = useCursor()
13
+
interactivity();
15
14
16
15
let rotate = spring(
17
16
0,
18
17
{
19
18
stiffness: 0.1,
20
-
damping: 0.1
19
+
damping: 0.05
21
20
}
22
21
);
23
22
let size = spring(
24
23
2,
25
24
{
26
25
stiffness: 0.1,
27
-
damping: 0.1
26
+
damping: 0.5
28
27
}
29
28
);
30
29
31
-
let rotation = 0;
32
30
let distance = 1;
33
31
34
-
let rotationSpeed = 0.5;
32
+
let rotationSpeed = 0.2;
35
33
useTask((delta) => {
36
34
// rotation += delta * rotationSpeed;
37
35
···
52
50
});
53
51
54
52
export let pos = 0;
55
-
56
-
function debounceScale() {
57
-
setTimeout(() => {
58
-
size.set(2);
59
-
}, 100);
60
-
}
61
53
</script>
62
54
63
55
<T.PerspectiveCamera
···
75
67
76
68
<PlanetModel
77
69
on:click={() => {
78
-
rotate.set($rotate + 5);
70
+
rotate.set($rotate + 2);
79
71
}}
80
72
on:pointerleave={() => {
81
73
size.set(2)