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 (
- + { + gl.toneMapping = THREE.Uncharted2ToneMapping + gl.setClearColor(new THREE.Color('#020207')) + }}> - +
); 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; +} +