diff --git a/package-lock.json b/package-lock.json index 8fa5443..68ba97a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@react-three/fiber": "^8.15.13", "@react-three/postprocessing": "^2.15.11", "@react-three/rapier": "^1.2.1", - "gsap": "^3.12.4", + "gsap": "^3.12.5", "leva": "^0.9.35", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1981,9 +1981,9 @@ } }, "node_modules/gsap": { - "version": "3.12.4", - "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz", - "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ==" + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==" }, "node_modules/has-property-descriptors": { "version": "1.0.1", diff --git a/package.json b/package.json index 9f8af88..9eab699 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@react-three/fiber": "^8.15.13", "@react-three/postprocessing": "^2.15.11", "@react-three/rapier": "^1.2.1", - "gsap": "^3.12.4", + "gsap": "^3.12.5", "leva": "^0.9.35", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/public/circle.png b/public/circle.png new file mode 100644 index 0000000..a4c3140 Binary files /dev/null and b/public/circle.png differ diff --git a/public/star.png b/public/star.png new file mode 100644 index 0000000..8ff3b13 Binary files /dev/null and b/public/star.png differ diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 9b6a6c1..e7597ea 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -39,7 +39,7 @@ export const Experience = () => { > - + {/* */} { const upPressed = useKeyboardControls((state) => state[Controls.up]); @@ -357,6 +358,10 @@ export const PlayerController = () => { + + + + {/* */} diff --git a/src/components/PointParticle.jsx b/src/components/PointParticle.jsx new file mode 100644 index 0000000..8ca87b0 --- /dev/null +++ b/src/components/PointParticle.jsx @@ -0,0 +1,48 @@ +import React, { useState, useEffect, useRef } from "react"; +import { Canvas, useLoader, useFrame } from "@react-three/fiber"; +import * as THREE from "three"; + +export const PointParticle = ({ position, png, turboColor }) => { + const texture = useLoader(THREE.TextureLoader, png); + const pointsRef = useRef(); + const [size, setSize] = useState(0); + const [opacity, setOpacity] = useState(1); + + const points = React.useMemo(() => { + const geom = new THREE.BufferGeometry(); + geom.setAttribute( + "position", + new THREE.Float32BufferAttribute(position, 3) + ); + return geom; + }, [position]); + + useEffect(() => { + + setSize(0); + setOpacity(1); + }, [turboColor]); + + useFrame(() => { + if (turboColor === 0xffffff) return; + if (size < 5) { + setSize((size) => size + 0.5); + } else if (opacity > 0) { + setOpacity((opacity) => opacity - 0.05); + } + }); + + return ( + + + + ); +};