feat:(game) improved particle system for drifting
parent
cb8052e1d3
commit
e1c11b3d74
|
@ -3,7 +3,7 @@ import { Particles3 } from "./Particles3";
|
|||
|
||||
export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
|
||||
|
||||
if(scale < 0.5) {
|
||||
if(scale < 0.8) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
@ -20,8 +20,6 @@ export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
|
|||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
|
||||
<Particles3 turboColor={turboColor} scale={scale} />
|
||||
<Particles3 turboColor={turboColor} scale={scale} />
|
||||
<Particles3 turboColor={turboColor} scale={scale} />
|
||||
|
||||
</group>
|
||||
)
|
||||
|
|
|
@ -3,13 +3,13 @@ import { Particles4 } from "./Particles4";
|
|||
|
||||
export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
|
||||
|
||||
if(scale < 0.5) {
|
||||
if(scale < 0.8) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<group {...props}>
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
|
@ -20,8 +20,7 @@ export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
|
|||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
|
||||
<Particles4 turboColor={turboColor} scale={scale} />
|
||||
<Particles4 turboColor={turboColor} scale={scale} />
|
||||
<Particles4 turboColor={turboColor} scale={scale} />
|
||||
|
||||
|
||||
</group>
|
||||
)
|
||||
|
|
|
@ -1,20 +1,19 @@
|
|||
import { useRef } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from 'three';
|
||||
|
||||
export const Particles1 = ({ turboColor, scale, ...props }) => {
|
||||
const ref = useRef();
|
||||
const frame = useRef(0);
|
||||
|
||||
const velocity = useRef({
|
||||
x: -Math.random() * 0.1,
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
|
||||
useFrame(() => {
|
||||
frame.current += 1;
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
|
||||
velocity.current.y += gravity;
|
||||
|
||||
|
@ -22,12 +21,18 @@ export const Particles1 = ({ turboColor, scale, ...props }) => {
|
|||
position.y += velocity.current.y;
|
||||
position.z += velocity.current.z;
|
||||
|
||||
if (position.y < 0) {
|
||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||
const alignmentQuaternion = new THREE.Quaternion();
|
||||
alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize());
|
||||
ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
|
||||
}
|
||||
|
||||
if (position.y < 0.05) {
|
||||
position.set(-0.6, 0.05, 0.5);
|
||||
velocity.current = {
|
||||
x: -Math.random() * 0.1,
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -35,8 +40,8 @@ export const Particles1 = ({ turboColor, scale, ...props }) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={scale}>
|
||||
<boxGeometry args={[0.05, 0.1, 0.05]} />
|
||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
|
|
|
@ -1,20 +1,19 @@
|
|||
import { useRef } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from 'three';
|
||||
|
||||
export const Particles2 = ({ turboColor, scale, ...props }) => {
|
||||
const ref = useRef();
|
||||
const frame = useRef(0);
|
||||
|
||||
const velocity = useRef({
|
||||
x: Math.random() * 0.1,
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
|
||||
useFrame(() => {
|
||||
frame.current += 1;
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
|
||||
velocity.current.y += gravity;
|
||||
|
||||
|
@ -22,12 +21,18 @@ export const Particles2 = ({ turboColor, scale, ...props }) => {
|
|||
position.y += velocity.current.y;
|
||||
position.z += velocity.current.z;
|
||||
|
||||
if (position.y < 0) {
|
||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||
const alignmentQuaternion = new THREE.Quaternion();
|
||||
alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize());
|
||||
ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
|
||||
}
|
||||
|
||||
if (position.y < 0.05) {
|
||||
position.set(0.6, 0.05, 0.5);
|
||||
velocity.current = {
|
||||
x: Math.random() * 0.1,
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -35,8 +40,8 @@ export const Particles2 = ({ turboColor, scale, ...props }) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||
<boxGeometry args={[0.05, 0.1, 0.05]} />
|
||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
|
|
|
@ -1,21 +1,20 @@
|
|||
import { useRef } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import { Trail } from "@react-three/drei";
|
||||
import * as THREE from 'three';
|
||||
|
||||
export const Particles3 = ({ turboColor, scale, ...props }) => {
|
||||
const ref = useRef();
|
||||
const frame = useRef(0);
|
||||
|
||||
const velocity = useRef({
|
||||
x: -Math.random() * 0.1,
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.1,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
const gravity = -0.001;
|
||||
|
||||
const frames = useRef(0);
|
||||
useFrame(() => {
|
||||
frame.current += 1;
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
|
||||
velocity.current.y += gravity;
|
||||
|
||||
|
@ -23,25 +22,35 @@ export const Particles3 = ({ turboColor, scale, ...props }) => {
|
|||
position.y += velocity.current.y;
|
||||
position.z += velocity.current.z;
|
||||
|
||||
if (position.y < 0) {
|
||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||
const alignmentQuaternion = new THREE.Quaternion();
|
||||
alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize());
|
||||
ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
|
||||
}
|
||||
|
||||
if (frames.current > Math.floor(Math.random() * (150 - 50)) + 50 ) {
|
||||
position.set(-0.6, 0.05, 0.5);
|
||||
velocity.current = {
|
||||
x: -Math.random() * 0.1,
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.1,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
};
|
||||
frames.current = 0;
|
||||
}
|
||||
|
||||
ref.current.position.set(position.x, position.y, position.z);
|
||||
|
||||
frames.current++;
|
||||
console.log(frames.current)
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={scale}>
|
||||
<boxGeometry args={[0.1, 0.2, 0.1]} />
|
||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={50}
|
||||
emissiveIntensity={10}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
|
|
|
@ -1,21 +1,20 @@
|
|||
import { useRef } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import { Trail } from "@react-three/drei";
|
||||
import * as THREE from 'three';
|
||||
|
||||
export const Particles4 = ({ turboColor, scale, ...props }) => {
|
||||
const ref = useRef();
|
||||
const frame = useRef(0);
|
||||
|
||||
const velocity = useRef({
|
||||
x: Math.random() * 0.1,
|
||||
y: Math.random() * 0.2,
|
||||
z: Math.random() * 0.05,
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.1,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
const gravity = -0.001;
|
||||
|
||||
const frames = useRef(0);
|
||||
useFrame(() => {
|
||||
frame.current += 1;
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
|
||||
velocity.current.y += gravity;
|
||||
|
||||
|
@ -23,25 +22,35 @@ export const Particles4 = ({ turboColor, scale, ...props }) => {
|
|||
position.y += velocity.current.y;
|
||||
position.z += velocity.current.z;
|
||||
|
||||
if (position.y < 0) {
|
||||
if (!velocityVector.equals(new THREE.Vector3(0, 0, 0))) {
|
||||
const alignmentQuaternion = new THREE.Quaternion();
|
||||
alignmentQuaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), velocityVector.normalize());
|
||||
ref.current.quaternion.slerp(alignmentQuaternion, 0.1);
|
||||
}
|
||||
|
||||
if (frames.current > Math.floor(Math.random() * (150 - 100)) + 100 ) {
|
||||
position.set(0.6, 0.05, 0.5);
|
||||
velocity.current = {
|
||||
x: Math.random() * 0.1,
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.1,
|
||||
z: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
};
|
||||
frames.current = 0;
|
||||
}
|
||||
|
||||
ref.current.position.set(position.x, position.y, position.z);
|
||||
|
||||
frames.current++;
|
||||
console.log(frames.current)
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||
<boxGeometry args={[0.1, 0.1, 0.1]} />
|
||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 20, scale]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={50}
|
||||
emissiveIntensity={10}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
|
|
|
@ -75,7 +75,6 @@ export const PlayerController = () => {
|
|||
0,
|
||||
-Math.cos(kartRotation)
|
||||
);
|
||||
console.log(forwardDirection);
|
||||
|
||||
if (leftPressed && currentSpeed > 0) {
|
||||
steeringAngle = currentSteeringSpeed;
|
||||
|
@ -248,7 +247,12 @@ export const PlayerController = () => {
|
|||
const oscillation = Math.sin(time * 1000) * 0.1;
|
||||
|
||||
const vibration = oscillation + 0.9;
|
||||
setScale(vibration);
|
||||
|
||||
if (turboColor === 0xffffff) {
|
||||
setScale(vibration * 0.8);
|
||||
} else {
|
||||
setScale(vibration);
|
||||
}
|
||||
}
|
||||
// RELEASING DRIFT
|
||||
|
||||
|
@ -329,9 +333,9 @@ export const PlayerController = () => {
|
|||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={50}
|
||||
emissiveIntensity={100}
|
||||
transparent
|
||||
opacity={1}
|
||||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<pointLight
|
||||
|
@ -345,9 +349,9 @@ export const PlayerController = () => {
|
|||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={50}
|
||||
emissiveIntensity={100}
|
||||
transparent
|
||||
opacity={1}
|
||||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
|
|
Loading…
Reference in New Issue