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