enhancing universe

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 (
     <div css={canvasCss}>
-      <Canvas>
+      <Canvas
+        onCreated={({ gl }) => {
+          gl.toneMapping = THREE.Uncharted2ToneMapping
+          gl.setClearColor(new THREE.Color('#020207'))
+      }}>
         <ambientLight />
         <pointLight position={[10, 10, 10]} />
         <Box position={[-1.2, 0, 0]} />
-        <G0Universe />
+        <G0Universe x={1.2} y={0} z={0} />
       </Canvas>
     </div>
   );

src/components/G0/GenZPlanet.tsx

@@ -28,7 +28,7 @@ export function GenZPlanet(props: ThreeElements["mesh"]) {
       ref={ref}
       onClick={onPlanetClick}
     >
-     <sphereBufferGeometry attach="geometry" args={[1, 28,28]} scale={4} />
+     <sphereBufferGeometry attach="geometry" args={[1, 28,28]} scale={8} />
      <meshStandardMaterial map={textureArr[selectedGenZIdx]} attach="material" />
     </mesh>
   );

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 (
+    <>
+      <pointLight ref={light} distance={100} intensity={15} color="lightblue" position={[0,0,-15]} />
+      <instancedMesh ref={mesh} args={[null, null, count]}>
+        <dodecahedronBufferGeometry args={[0.2, 0]} />
+        <meshPhongMaterial color="#050505" />
+      </instancedMesh>
+    </>
+  );
+}

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 (
     <>
-      <GenZPlanet position={[1.2, 0, 0]}/>
+      <GenZPlanet position={[x + 1.2, y + 0, z + 0]}/>
+      <SpaceDust count={8000} />
     </>
   );
 };

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;
+}
+