fix(game): implemented the InstancedMesh principle on the particle system for drifting
parent
b1b93043f8
commit
2d9230b8ea
|
@ -43,7 +43,7 @@ function App() {
|
|||
<KeyboardControls map={map}>
|
||||
<Experience />
|
||||
</KeyboardControls>
|
||||
{/* <Stats /> */}
|
||||
<Stats />
|
||||
</Physics>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
|
|
|
@ -10,16 +10,16 @@ export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
|
|||
return (
|
||||
<group {...props}>
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
{/* <Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} />
|
||||
<Particles1 turboColor={turboColor} scale={scale} /> */}
|
||||
|
||||
<Particles3 turboColor={turboColor} scale={scale} />
|
||||
{/* <Particles3 turboColor={turboColor} scale={scale} /> */}
|
||||
|
||||
</group>
|
||||
)
|
||||
|
|
|
@ -10,17 +10,6 @@ export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
|
|||
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} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
|
||||
<Particles4 turboColor={turboColor} scale={scale} />
|
||||
|
||||
|
||||
</group>
|
||||
)
|
||||
|
|
|
@ -1,55 +1,47 @@
|
|||
import { useRef } from "react";
|
||||
import { useRef, useMemo } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from 'three';
|
||||
|
||||
export const Particles1 = ({ turboColor, scale, ...props }) => {
|
||||
const ref = useRef();
|
||||
const velocity = useRef({
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
export const Particles1 = ({ turboColor, scale, numParticles = 50, ...props }) => {
|
||||
const instancedMeshRef = useRef();
|
||||
const particlesData = useMemo(() => {
|
||||
return new Array(numParticles).fill().map(() => ({
|
||||
position: new THREE.Vector3(-0.6, 0.05, 0.5),
|
||||
velocity: new THREE.Vector3(-Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02),
|
||||
gravity: -0.003
|
||||
}));
|
||||
}, [numParticles]);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
const deltaScaled = delta * 144; // Scale for 144 FPS
|
||||
particlesData.forEach((particle, i) => {
|
||||
particle.velocity.y += particle.gravity * deltaScaled;
|
||||
|
||||
// Adjust gravity and velocity based on delta
|
||||
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||
particle.position.x += particle.velocity.x * deltaScaled;
|
||||
particle.position.y += particle.velocity.y * deltaScaled;
|
||||
particle.position.z += particle.velocity.z * deltaScaled;
|
||||
|
||||
// Scale velocity changes by delta
|
||||
position.x += velocity.current.x * delta * 144;
|
||||
position.y += velocity.current.y * delta * 144;
|
||||
position.z += velocity.current.z * delta * 144;
|
||||
|
||||
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 (particle.position.y < 0.05) {
|
||||
particle.position.set(-0.6, 0.05, 0.5);
|
||||
particle.velocity.set(-Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02);
|
||||
}
|
||||
|
||||
if (position.y < 0.05) {
|
||||
position.set(-0.6, 0.05, 0.5);
|
||||
velocity.current = {
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
};
|
||||
}
|
||||
|
||||
ref.current.position.set(position.x, position.y, position.z);
|
||||
const matrix = new THREE.Matrix4();
|
||||
matrix.setPosition(particle.position);
|
||||
instancedMeshRef.current.setMatrixAt(i, matrix);
|
||||
});
|
||||
|
||||
instancedMeshRef.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh ref={ref} position={[-0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
||||
<instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={5}
|
||||
/>
|
||||
</mesh>
|
||||
</instancedMesh>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,55 +1,47 @@
|
|||
import { useRef } from "react";
|
||||
import { useRef, useMemo } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from 'three';
|
||||
|
||||
export const Particles2 = ({ turboColor, scale, ...props }) => {
|
||||
const ref = useRef();
|
||||
const velocity = useRef({
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
export const Particles2 = ({ turboColor, scale, numParticles = 50, ...props }) => {
|
||||
const instancedMeshRef = useRef();
|
||||
const particlesData = useMemo(() => {
|
||||
return new Array(numParticles).fill().map(() => ({
|
||||
position: new THREE.Vector3(0.6, 0.05, 0.5),
|
||||
velocity: new THREE.Vector3(Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02),
|
||||
gravity: -0.003
|
||||
}));
|
||||
}, [numParticles]);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
const deltaScaled = delta * 144; // Scale for 144 FPS
|
||||
particlesData.forEach((particle, i) => {
|
||||
particle.velocity.y += particle.gravity * deltaScaled;
|
||||
|
||||
// Adjust gravity and velocity based on delta
|
||||
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||
particle.position.x += particle.velocity.x * deltaScaled;
|
||||
particle.position.y += particle.velocity.y * deltaScaled;
|
||||
particle.position.z += particle.velocity.z * deltaScaled;
|
||||
|
||||
// Scale velocity changes by delta
|
||||
position.x += velocity.current.x * delta * 144;
|
||||
position.y += velocity.current.y * delta * 144;
|
||||
position.z += velocity.current.z * delta * 144;
|
||||
|
||||
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 (particle.position.y < 0.05) {
|
||||
particle.position.set(0.6, 0.05, 0.5);
|
||||
particle.velocity.set(Math.random() * 0.05, Math.random() * 0.05, Math.random() * 0.02);
|
||||
}
|
||||
|
||||
if (position.y < 0.05) {
|
||||
position.set(0.6, 0.05, 0.5);
|
||||
velocity.current = {
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
};
|
||||
}
|
||||
|
||||
ref.current.position.set(position.x, position.y, position.z);
|
||||
const matrix = new THREE.Matrix4();
|
||||
matrix.setPosition(particle.position);
|
||||
instancedMeshRef.current.setMatrixAt(i, matrix);
|
||||
});
|
||||
|
||||
instancedMeshRef.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<mesh ref={ref} position={[0.6, 0.05, 0.5]} scale={[scale, scale * 5, scale]}>
|
||||
<instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={5}
|
||||
/>
|
||||
</mesh>
|
||||
</instancedMesh>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -387,13 +387,13 @@ export const PlayerController = () => {
|
|||
/>
|
||||
</mesh>
|
||||
|
||||
<Cylinder
|
||||
{/* <Cylinder
|
||||
args={[0.1, 0, 1, 128, 64, true]}
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
rotation={[Math.PI / 3, 0 , 0]}
|
||||
>
|
||||
<meshStandardMaterial side={THREE.DoubleSide} />
|
||||
</Cylinder>
|
||||
</Cylinder> */}
|
||||
{/* <Flame/> */}
|
||||
<FlameParticles isBoosting={isBoosting} />
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
|
|
Loading…
Reference in New Issue