[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
fix errors
+1
-77
-77
src/components/Hero/3D/worlds/stars.ts
-77
src/components/Hero/3D/worlds/stars.ts
···
1
-
import * as THREE from "three";
2
-
3
-
export type StarsOptions = {
4
-
particleCount: number;
5
-
minimumDistance: number;
6
-
maximumDistance: number;
7
-
};
8
-
9
-
export class Stars extends THREE.Group {
10
-
private particleCount: number = 5000;
11
-
12
-
private minimumDistance: number = 10;
13
-
private maximumDistance: number = 20;
14
-
15
-
private positions: Float32Array;
16
-
private colors: Float32Array;
17
-
private geometry: THREE.BufferGeometry;
18
-
private material: THREE.PointsMaterial;
19
-
private particles: THREE.Points;
20
-
21
-
private tempVector = new THREE.Vector3();
22
-
23
-
constructor(opts: Partial<StarsOptions> = {}) {
24
-
super();
25
-
26
-
this.particleCount = opts.particleCount ?? this.particleCount;
27
-
this.minimumDistance = opts.minimumDistance ?? this.minimumDistance;
28
-
this.maximumDistance = opts.maximumDistance ?? this.maximumDistance;
29
-
30
-
this.positions = new Float32Array(this.particleCount * 3);
31
-
this.colors = new Float32Array(this.particleCount * 3);
32
-
33
-
this.setupParticles();
34
-
}
35
-
36
-
private setupParticles() {
37
-
for (let i = 0; i < this.particleCount; i++) {
38
-
this.resetParticle(i);
39
-
}
40
-
41
-
this.geometry = new THREE.BufferGeometry();
42
-
this.geometry.setAttribute(
43
-
"position",
44
-
new THREE.BufferAttribute(this.positions, 3),
45
-
);
46
-
this.geometry.setAttribute(
47
-
"color",
48
-
new THREE.BufferAttribute(this.colors, 3),
49
-
);
50
-
51
-
this.material = new THREE.PointsMaterial({
52
-
size: 0.04,
53
-
vertexColors: true,
54
-
});
55
-
56
-
this.particles = new THREE.Points(this.geometry, this.material);
57
-
58
-
this.add(this.particles);
59
-
}
60
-
61
-
private resetParticle(i: number) {
62
-
const index = i * 3;
63
-
64
-
const distance =
65
-
Math.random() * (this.maximumDistance - this.minimumDistance) +
66
-
this.minimumDistance;
67
-
this.tempVector.randomDirection().multiplyScalar(distance);
68
-
69
-
this.positions[index] = this.tempVector.x;
70
-
this.positions[index + 1] = this.tempVector.y;
71
-
this.positions[index + 2] = this.tempVector.z;
72
-
73
-
this.colors[index] = Math.random() < 0.2 ? 0.3 : 1.0;
74
-
this.colors[index + 1] = Math.random() < 0.2 ? 0.3 : 1.0;
75
-
this.colors[index + 2] = Math.random() < 0.2 ? 0.3 : 1.0;
76
-
}
77
-
}