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