diff --git a/src/App.tsx b/src/App.tsx
index d31a1a0..b132302 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,21 @@
import { css } from "@emotion/react";
import { Canvas } from "@react-three/fiber";
import { Box } from "./components/Box";
+import * as THREE from "three";
import G0Universe from "./components/G0/";
export function ThreeCanvas() {
return (
-
);
diff --git a/src/components/G0/GenZPlanet.tsx b/src/components/G0/GenZPlanet.tsx
index 38ba87e..e2891cc 100644
--- a/src/components/G0/GenZPlanet.tsx
+++ b/src/components/G0/GenZPlanet.tsx
@@ -28,7 +28,7 @@ export function GenZPlanet(props: ThreeElements["mesh"]) {
ref={ref}
onClick={onPlanetClick}
>
-
+
);
diff --git a/src/components/G0/SpaceDust.tsx b/src/components/G0/SpaceDust.tsx
new file mode 100644
index 0000000..f1af378
--- /dev/null
+++ b/src/components/G0/SpaceDust.tsx
@@ -0,0 +1,66 @@
+import * as THREE from 'three';
+import React, { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import getRandomRange from '../../utils/getRandomRange';
+
+export function SpaceDust({ count }) {
+ const mesh = useRef();
+ const light = useRef();
+
+ // Generate some random positions, speed factors and timings
+ const particles = useMemo(() => {
+ const temp = [];
+ for (let i = 0; i < count; i++) {
+ const time = getRandomRange(0, 100);
+ const factor = getRandomRange(20, 120);
+ const speed = getRandomRange(0.01, 0.015) / 2;
+ const x = getRandomRange(-50, 50);
+ const y = getRandomRange(-50, 50);
+ const z = getRandomRange(-50, 50);
+
+ temp.push({ time, factor, speed, x, y, z });
+ }
+ return temp;
+ }, [count]);
+
+ const dummy = useMemo(() => new THREE.Object3D(), []);
+
+ useFrame(() => {
+ // Run through the randomized data to calculate some movement
+ particles.forEach((particle, index) => {
+ let { factor, speed, x, y, z } = particle;
+
+ // Update the particle time
+ const t = (particle.time += speed);
+
+ // Update the particle position based on the time
+ // This is mostly random trigonometry functions to oscillate around the (x, y, z) point
+ dummy.position.set(
+ x + Math.cos((t / 10) * factor) + (Math.sin(t * 1) * factor) / 10,
+ y + Math.sin((t / 10) * factor) + (Math.cos(t * 2) * factor) / 10,
+ z + Math.cos((t / 10) * factor) + (Math.sin(t * 3) * factor) / 10
+ );
+
+ // Derive an oscillating value which will be used
+ // for the particle size and rotation
+ const s = Math.cos(t);
+ dummy.scale.set(s, s, s);
+ dummy.rotation.set(s * 5, s * 5, s * 5);
+ dummy.updateMatrix();
+
+ // And apply the matrix to the instanced item
+ mesh.current.setMatrixAt(index, dummy.matrix);
+ });
+ mesh.current.instanceMatrix.needsUpdate = true;
+ });
+
+ return (
+ <>
+
+
+
+
+
+ >
+ );
+}
\ No newline at end of file
diff --git a/src/components/G0/index.tsx b/src/components/G0/index.tsx
index 3b2093f..83a2fef 100644
--- a/src/components/G0/index.tsx
+++ b/src/components/G0/index.tsx
@@ -1,9 +1,11 @@
import GenZPlanet from "./GenZPlanet";
+import { SpaceDust } from "./SpaceDust";
-const G0Universe = () => {
+const G0Universe = ({x,y,z}:{x:number,y:number,z:number}) => {
return (
<>
-
+
+
>
);
};
diff --git a/src/utils/getRandomRange.ts b/src/utils/getRandomRange.ts
new file mode 100644
index 0000000..a317029
--- /dev/null
+++ b/src/utils/getRandomRange.ts
@@ -0,0 +1,12 @@
+export default function getRandomRange (min:number, max:number) {
+ if (max === undefined) {
+ max = min;
+ min = 0;
+ }
+
+ if (typeof min !== 'number' || typeof max !== 'number') {
+ throw new TypeError('Expected all arguments to be numbers');
+ }
+ return (Math.random()) * (max - min) + min;
+}
+