feat:(game) improved particle system for drifting again
parent
e1c11b3d74
commit
6d4032d9c7
|
@ -12,7 +12,7 @@
|
||||||
"@react-three/fiber": "^8.15.13",
|
"@react-three/fiber": "^8.15.13",
|
||||||
"@react-three/postprocessing": "^2.15.11",
|
"@react-three/postprocessing": "^2.15.11",
|
||||||
"@react-three/rapier": "^1.2.1",
|
"@react-three/rapier": "^1.2.1",
|
||||||
"gsap": "^3.12.4",
|
"gsap": "^3.12.5",
|
||||||
"leva": "^0.9.35",
|
"leva": "^0.9.35",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
@ -1981,9 +1981,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/gsap": {
|
"node_modules/gsap": {
|
||||||
"version": "3.12.4",
|
"version": "3.12.5",
|
||||||
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz",
|
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
|
||||||
"integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
|
"integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
|
||||||
},
|
},
|
||||||
"node_modules/has-property-descriptors": {
|
"node_modules/has-property-descriptors": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
"@react-three/fiber": "^8.15.13",
|
"@react-three/fiber": "^8.15.13",
|
||||||
"@react-three/postprocessing": "^2.15.11",
|
"@react-three/postprocessing": "^2.15.11",
|
||||||
"@react-three/rapier": "^1.2.1",
|
"@react-three/rapier": "^1.2.1",
|
||||||
"gsap": "^3.12.4",
|
"gsap": "^3.12.5",
|
||||||
"leva": "^0.9.35",
|
"leva": "^0.9.35",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
After Width: | Height: | Size: 35 KiB |
|
@ -39,7 +39,7 @@ export const Experience = () => {
|
||||||
|
|
||||||
>
|
>
|
||||||
<SMAA />
|
<SMAA />
|
||||||
<N8AO distanceFalloff={1} aoRadius={1} intensity={3} />
|
{/* <N8AO distanceFalloff={1} aoRadius={1} intensity={3} /> */}
|
||||||
<Bloom
|
<Bloom
|
||||||
luminanceThreshold={0}
|
luminanceThreshold={0}
|
||||||
mipmapBlur
|
mipmapBlur
|
||||||
|
|
|
@ -20,6 +20,7 @@ import { Particles1 } from "./Particles1";
|
||||||
import { DriftParticlesLeft } from "./DriftParticlesLeft";
|
import { DriftParticlesLeft } from "./DriftParticlesLeft";
|
||||||
import { DriftParticlesRight } from "./DriftParticlesRight";
|
import { DriftParticlesRight } from "./DriftParticlesRight";
|
||||||
import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
|
import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
|
||||||
|
import { PointParticle } from "./PointParticle";
|
||||||
|
|
||||||
export const PlayerController = () => {
|
export const PlayerController = () => {
|
||||||
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
||||||
|
@ -357,6 +358,10 @@ export const PlayerController = () => {
|
||||||
|
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
<PointParticle position={[-0.6, 0.05, 0.5]} png="./circle.png" turboColor={turboColor}/>
|
||||||
|
<PointParticle position={[0.6, 0.05, 0.5]} png="./circle.png" turboColor={turboColor}/>
|
||||||
|
<PointParticle position={[-0.6, 0.05, 0.5]} png="./star.png" turboColor={turboColor}/>
|
||||||
|
<PointParticle position={[0.6, 0.05, 0.5]} png="./star.png" turboColor={turboColor}/>
|
||||||
</group>
|
</group>
|
||||||
|
|
||||||
{/* <ContactShadows frames={1} /> */}
|
{/* <ContactShadows frames={1} /> */}
|
||||||
|
|
|
@ -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 (
|
||||||
|
<points ref={pointsRef} geometry={points}>
|
||||||
|
<pointsMaterial
|
||||||
|
size={size}
|
||||||
|
alphaMap={texture}
|
||||||
|
transparent={true}
|
||||||
|
depthWrite={false}
|
||||||
|
color={turboColor}
|
||||||
|
opacity={opacity}
|
||||||
|
toneMapped={false}
|
||||||
|
/>
|
||||||
|
</points>
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue