Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Alex
|
a8cf0d1ca4 | ||
|
Alex
|
faad40aa9d | ||
 Lunakepio
|
bfccc00f4d | ||
|
Alex
|
54810a73cd | ||
|
Alex
|
fdd821e630 | ||
|
Alex
|
2d9230b8ea |
No files matched your search
Generated
+52
-45
@@ -8,15 +8,16 @@
|
||||
"name": "vite-starter",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.93.0",
|
||||
"@react-three/fiber": "^8.15.13",
|
||||
"@react-three/drei": "^9.96.4",
|
||||
"@react-three/fiber": "^8.15.15",
|
||||
"@react-three/postprocessing": "^2.15.11",
|
||||
"@react-three/rapier": "^1.2.1",
|
||||
"gsap": "^3.12.5",
|
||||
"joymap": "^2.2.4",
|
||||
"leva": "^0.9.35",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"three": "^0.160.0",
|
||||
"three": "^0.160.1",
|
||||
"zustand": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -932,9 +933,9 @@
|
||||
"integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
|
||||
},
|
||||
"node_modules/@react-three/drei": {
|
||||
"version": "9.93.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.93.0.tgz",
|
||||
"integrity": "sha512-G59IZqPzpIZPvVLmzdCITXJQB+mnKMtFv7FvSRFogeelLzOFkyfnkED9QiY0WQCBMFOFLnSx6vb5xzmbQjHyQA==",
|
||||
"version": "9.96.4",
|
||||
"resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.96.4.tgz",
|
||||
"integrity": "sha512-Zmy5felOamD7DkD5EeLfijNkohDxHNtXomGAf3C/0G6ml/ocf1+VrJ6mLDQRE+DhRnF1RDHV+WC6nuvpPPkx1w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.11.2",
|
||||
"@mediapipe/tasks-vision": "0.10.8",
|
||||
@@ -944,9 +945,6 @@
|
||||
"cross-env": "^7.0.3",
|
||||
"detect-gpu": "^5.0.28",
|
||||
"glsl-noise": "^0.0.0",
|
||||
"lodash.clamp": "^4.0.3",
|
||||
"lodash.omit": "^4.5.0",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"maath": "^0.10.7",
|
||||
"meshline": "^3.1.6",
|
||||
"react-composer": "^5.0.3",
|
||||
@@ -954,12 +952,13 @@
|
||||
"stats-gl": "^2.0.0",
|
||||
"stats.js": "^0.17.0",
|
||||
"suspend-react": "^0.1.3",
|
||||
"three-mesh-bvh": "^0.6.7",
|
||||
"three-stdlib": "^2.28.0",
|
||||
"three-mesh-bvh": "^0.7.0",
|
||||
"three-stdlib": "^2.29.4",
|
||||
"troika-three-text": "^0.47.2",
|
||||
"tunnel-rat": "^0.1.2",
|
||||
"utility-types": "^3.10.0",
|
||||
"uuid": "^9.0.1",
|
||||
"zustand": "^3.5.13"
|
||||
"zustand": "^3.7.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-three/fiber": ">=8.0",
|
||||
@@ -990,9 +989,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@react-three/fiber": {
|
||||
"version": "8.15.13",
|
||||
"resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.15.13.tgz",
|
||||
"integrity": "sha512-FS6F/k69q2KEf7nxdce1Rzd5qyp6VHtTgjouTMfiotWNiNwlhfQQeAxfcnDg0i2XVaOUGkLaD9BK8LBVnpfzUA==",
|
||||
"version": "8.15.15",
|
||||
"resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.15.15.tgz",
|
||||
"integrity": "sha512-Z5POnzgpYxrgnYuiCv+8t7lpynEcGcn0/323kV1NtE7Cwq16aMqEuC6nF2Y/tK+crJpKNEqsRtvng/eJy0xxOA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.8",
|
||||
"@types/react-reconciler": "^0.26.7",
|
||||
@@ -1863,6 +1862,11 @@
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"node_modules/fast-memoize": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
|
||||
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.6.10",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
|
||||
@@ -2141,6 +2145,16 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/joymap": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/joymap/-/joymap-2.2.4.tgz",
|
||||
"integrity": "sha512-5N0VMbym49AwrfUz0vD6tE++I50SFjBYtwcJsdgE086GgAraGB2YQFsgVj+cG2fd8eUFmK+8U36Ecud3/UYTRg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2",
|
||||
"fast-memoize": "^2.5.2",
|
||||
"lodash": "^4.17.15"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@@ -2194,21 +2208,6 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"node_modules/lodash.clamp": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
|
||||
"integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
|
||||
},
|
||||
"node_modules/lodash.omit": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
|
||||
"integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
|
||||
},
|
||||
"node_modules/lodash.pick": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
|
||||
"integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q=="
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@@ -2893,22 +2892,22 @@
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.160.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.160.0.tgz",
|
||||
"integrity": "sha512-DLU8lc0zNIPkM7rH5/e1Ks1Z8tWCGRq6g8mPowdDJpw1CFBJMU7UoJjC6PefXW7z//SSl0b2+GCw14LB+uDhng=="
|
||||
"version": "0.160.1",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.160.1.tgz",
|
||||
"integrity": "sha512-Bgl2wPJypDOZ1stAxwfWAcJ0WQf7QzlptsxkjYiURPz+n5k4RBDLsq+6f9Y75TYxn6aHLcWz+JNmwTOXWrQTBQ=="
|
||||
},
|
||||
"node_modules/three-mesh-bvh": {
|
||||
"version": "0.6.8",
|
||||
"resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.6.8.tgz",
|
||||
"integrity": "sha512-EGebF9DZx1S8+7OZYNNTT80GXJZVf+UYXD/HyTg/e2kR/ApofIFfUS4ZzIHNnUVIadpnLSzM4n96wX+l7GMbnQ==",
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.0.tgz",
|
||||
"integrity": "sha512-Hj0Z1Rp02yy5H+/xtMBu/dYAeRsSONaBaVLZoST9sMpZxycHypRiUeMHucPOLWFHnpc5hwelOnONcLpkfhDg0Q==",
|
||||
"peerDependencies": {
|
||||
"three": ">= 0.151.0"
|
||||
}
|
||||
},
|
||||
"node_modules/three-stdlib": {
|
||||
"version": "2.28.12",
|
||||
"resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.28.12.tgz",
|
||||
"integrity": "sha512-6ZAomFjrtDVNxI56F3QNgV7uVn8JlEZVgzZP+UE9h/zpKmeD3pIZvmWymw9sYPoteof0hLDFom3cETRhErQh3g==",
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.29.4.tgz",
|
||||
"integrity": "sha512-XNzGCrz/uAk9XoLwd35eN7dQyI4ggXZTeqjcN034YdYBpBlNO9kmLHehl/0Nw9jCelblB7jla+unHAOIyLyV6Q==",
|
||||
"dependencies": {
|
||||
"@types/draco3d": "^1.4.0",
|
||||
"@types/offscreencanvas": "^2019.6.4",
|
||||
@@ -2966,6 +2965,14 @@
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/tunnel-rat": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
|
||||
"integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
|
||||
"dependencies": {
|
||||
"zustand": "^4.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
@@ -3006,9 +3013,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/utility-types": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
|
||||
"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
|
||||
"version": "3.11.0",
|
||||
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
|
||||
"integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
@@ -3047,9 +3054,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
|
||||
"integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
|
||||
"integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
|
||||
+4
-3
@@ -9,15 +9,16 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.93.0",
|
||||
"@react-three/fiber": "^8.15.13",
|
||||
"@react-three/drei": "^9.96.4",
|
||||
"@react-three/fiber": "^8.15.15",
|
||||
"@react-three/postprocessing": "^2.15.11",
|
||||
"@react-three/rapier": "^1.2.1",
|
||||
"gsap": "^3.12.5",
|
||||
"joymap": "^2.2.4",
|
||||
"leva": "^0.9.35",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"three": "^0.160.0",
|
||||
"three": "^0.160.1",
|
||||
"zustand": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
File renamed without changes.
File renamed without changes.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File renamed without changes.
File renamed without changes.
+1
-1
@@ -43,7 +43,7 @@ function App() {
|
||||
<KeyboardControls map={map}>
|
||||
<Experience />
|
||||
</KeyboardControls>
|
||||
{/* <Stats /> */}
|
||||
<Stats />
|
||||
</Physics>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
import { Particles2 } from "./Particles2";
|
||||
import { Particles4 } from "./Particles4";
|
||||
|
||||
export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
|
||||
|
||||
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} />
|
||||
<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,19 +1,15 @@
|
||||
import { Environment, OrbitControls, PerspectiveCamera, Lightformer } from '@react-three/drei'
|
||||
import { Ground } from './Ground'
|
||||
import { RigidBody } from '@react-three/rapier'
|
||||
import { PlayerController } from './PlayerController'
|
||||
import { Track } from './models/Spafrancorchamps-REALISTIC'
|
||||
import { Paris } from './models/Tour_paris_promenade'
|
||||
import { EffectComposer, N8AO, Bloom, DepthOfField, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing'
|
||||
import { PlayerControllerAgain } from './PlayerControllerAgain'
|
||||
import { Paris } from './models/tracks/Tour_paris_promenade'
|
||||
import { EffectComposer, N8AO, Bloom, TiltShift2, HueSaturation, SMAA, ChromaticAberration, Vignette } from '@react-three/postprocessing'
|
||||
import { Skid } from './Skid'
|
||||
|
||||
export const Experience = () => {
|
||||
return (
|
||||
<>
|
||||
<PlayerController />
|
||||
<Skid />
|
||||
{/* <PlayerControllerAgain /> */}
|
||||
{/* <Skid /> */}
|
||||
<Ground position={[0, 0, 0]} />
|
||||
<Environment
|
||||
resolution={256}
|
||||
@@ -33,8 +29,6 @@ export const Experience = () => {
|
||||
castShadow
|
||||
/>
|
||||
|
||||
{/* <ambientLight intensity={0.2} /> */}
|
||||
{/* <spotLight position={[10, 20, 10]} angle={0.12} penumbra={1} intensity={1} castShadow shadow-mapSize={1024} /> */}
|
||||
<Paris position={[0, 0, 0]} />
|
||||
<EffectComposer
|
||||
multisampling={0}
|
||||
@@ -51,12 +45,7 @@ export const Experience = () => {
|
||||
luminanceSmoothing={0.01}
|
||||
intensity={0.5}
|
||||
/>
|
||||
{/* <DepthOfField
|
||||
target={[0, 0, 12]}
|
||||
focalLength={15}
|
||||
bokehScale={60}
|
||||
resolutionScale={1}
|
||||
/> */}
|
||||
|
||||
<TiltShift2/>
|
||||
<ChromaticAberration offset={[0.0006, 0.0006]} />
|
||||
<HueSaturation saturation={0.1} />
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useLoader, useFrame } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
export const FlameParticle = ({ position, png, turboColor, delay = 0 }) => {
|
||||
const texture = useLoader(THREE.TextureLoader, png);
|
||||
const pointsRef = useRef();
|
||||
const [size, setSize] = useState(1);
|
||||
const [opacity, setOpacity] = useState(1);
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setInitialized(true);
|
||||
}, delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [delay]);
|
||||
|
||||
const points = React.useMemo(() => {
|
||||
const geom = new THREE.BufferGeometry();
|
||||
geom.setAttribute(
|
||||
"position",
|
||||
new THREE.Float32BufferAttribute(position, 3)
|
||||
);
|
||||
return geom;
|
||||
}, [position]);
|
||||
|
||||
useFrame(({clock}, delta) => {
|
||||
if (!initialized) return;
|
||||
|
||||
pointsRef.current.position.y += 0.03 * delta * 144;
|
||||
pointsRef.current.position.z += 0.06 * delta * 144;
|
||||
if(pointsRef.current.position.y > 0.4) {
|
||||
pointsRef.current.position.y = 0;
|
||||
pointsRef.current.position.z = 0;
|
||||
setOpacity(1);
|
||||
}
|
||||
if(opacity > 0) {
|
||||
setOpacity((opacity) => opacity - 0.05 * delta * 144);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<points ref={pointsRef} geometry={points}>
|
||||
<pointsMaterial
|
||||
size={size}
|
||||
alphaMap={texture}
|
||||
transparent={true}
|
||||
depthWrite={false}
|
||||
color={0x000000}
|
||||
opacity={opacity}
|
||||
toneMapped={false}
|
||||
/>
|
||||
</points>
|
||||
);
|
||||
};
|
||||
+6
-6
@@ -3,23 +3,23 @@ import { Particles3 } from "./Particles3";
|
||||
|
||||
export const DriftParticlesLeft = ({turboColor,scale, ...props}) => {
|
||||
|
||||
if(scale < 0.8) {
|
||||
return null;
|
||||
}
|
||||
// if(scale < 0.8) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
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>
|
||||
)
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Particles2 } from "./Particles2";
|
||||
import { Particles4 } from "./Particles4";
|
||||
|
||||
export const DriftParticlesRight = ({turboColor,scale, ...props}) => {
|
||||
|
||||
// if(scale < 0.8) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
return (
|
||||
<group {...props}>
|
||||
<Particles2 turboColor={turboColor} scale={scale} />
|
||||
|
||||
</group>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useRef, useMemo } from "react";
|
||||
import { useLoader, useFrame } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
export const FlameParticle = ({ position, png, isBoosting, delay = 0 }) => {
|
||||
const texture = useLoader(THREE.TextureLoader, png);
|
||||
const pointsRef = useRef();
|
||||
const initialized = useRef(false);
|
||||
|
||||
// Initialize after delay
|
||||
useMemo(() => {
|
||||
const timer = setTimeout(() => {
|
||||
initialized.current = true;
|
||||
}, delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [delay]);
|
||||
|
||||
const points = useMemo(() => {
|
||||
const geom = new THREE.BufferGeometry();
|
||||
geom.setAttribute(
|
||||
"position",
|
||||
new THREE.Float32BufferAttribute(position, 3)
|
||||
);
|
||||
return geom;
|
||||
}, [position]);
|
||||
|
||||
useFrame(({clock}, delta) => {
|
||||
if (!initialized.current) return;
|
||||
|
||||
const pointsCurrent = pointsRef.current;
|
||||
|
||||
if (isBoosting) {
|
||||
// Update logic when boosting
|
||||
pointsCurrent.position.y += 0.03 * delta * 144;
|
||||
pointsCurrent.position.z += 0.06 * delta * 144;
|
||||
|
||||
if(pointsCurrent.position.y > 0.4) {
|
||||
pointsCurrent.position.y = 0;
|
||||
pointsCurrent.position.z = 0;
|
||||
pointsCurrent.material.opacity = 1;
|
||||
}
|
||||
|
||||
if(pointsCurrent.material.opacity > 0) {
|
||||
pointsCurrent.material.opacity -= 0.05 * delta * 144;
|
||||
}
|
||||
} else {
|
||||
// Reset position and opacity when not boosting
|
||||
pointsCurrent.position.y = 0;
|
||||
pointsCurrent.position.z = 0;
|
||||
pointsCurrent.material.opacity = 0;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<points ref={pointsRef} geometry={points}>
|
||||
<pointsMaterial
|
||||
size={1}
|
||||
alphaMap={texture}
|
||||
transparent={true}
|
||||
depthWrite={false}
|
||||
color={0x000000}
|
||||
opacity={1}
|
||||
toneMapped={false}
|
||||
/>
|
||||
</points>
|
||||
);
|
||||
};
|
||||
@@ -2,9 +2,7 @@ import { FlameParticle } from "./FlameParticle";
|
||||
|
||||
export const FlameParticles = ({ isBoosting }) => {
|
||||
|
||||
if (!isBoosting) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<group>
|
||||
{/* bottom left */}
|
||||
@@ -12,37 +10,37 @@ export const FlameParticles = ({ isBoosting }) => {
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={0}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={100}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={200}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={300}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={400}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={500}
|
||||
/>
|
||||
</group>
|
||||
@@ -52,37 +50,37 @@ export const FlameParticles = ({ isBoosting }) => {
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={0}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={100}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={200}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={300}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={400}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={500}
|
||||
/>
|
||||
</group>
|
||||
@@ -91,37 +89,37 @@ export const FlameParticles = ({ isBoosting }) => {
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={0}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={100}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={200}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={300}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={400}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={500}
|
||||
/>
|
||||
</group>
|
||||
@@ -129,37 +127,37 @@ export const FlameParticles = ({ isBoosting }) => {
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={0}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={100}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={200}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={300}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_02.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={400}
|
||||
/>
|
||||
<FlameParticle
|
||||
position={[0, 0, 0]}
|
||||
png="./fire_01.png"
|
||||
turboColor={0xfea347}
|
||||
isBoosting={isBoosting}
|
||||
delay={500}
|
||||
/>
|
||||
</group>
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useRef, useMemo } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from 'three';
|
||||
|
||||
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) => {
|
||||
if (!instancedMeshRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Manage visibility directly in the animation loop
|
||||
instancedMeshRef.current.visible = scale >= 0.8;
|
||||
|
||||
if (scale < 0.8) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaScaled = delta * 144; // Scale for 144 FPS
|
||||
particlesData.forEach((particle, i) => {
|
||||
particle.velocity.y += particle.gravity * deltaScaled;
|
||||
|
||||
particle.position.x += particle.velocity.x * deltaScaled;
|
||||
particle.position.y += particle.velocity.y * deltaScaled;
|
||||
particle.position.z += particle.velocity.z * deltaScaled;
|
||||
|
||||
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);
|
||||
}
|
||||
const matrix = new THREE.Matrix4();
|
||||
matrix.setPosition(particle.position);
|
||||
instancedMeshRef.current.setMatrixAt(i, matrix);
|
||||
});
|
||||
|
||||
instancedMeshRef.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]} visible={scale >= 0.8}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={5}
|
||||
/>
|
||||
</instancedMesh>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useRef, useMemo } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from 'three';
|
||||
|
||||
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) => {
|
||||
if (!instancedMeshRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Manage visibility directly in the animation loop
|
||||
instancedMeshRef.current.visible = scale >= 0.8;
|
||||
|
||||
if (scale < 0.8) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deltaScaled = delta * 144; // Scale for 144 FPS
|
||||
particlesData.forEach((particle, i) => {
|
||||
particle.velocity.y += particle.gravity * deltaScaled;
|
||||
|
||||
particle.position.x += particle.velocity.x * deltaScaled;
|
||||
particle.position.y += particle.velocity.y * deltaScaled;
|
||||
particle.position.z += particle.velocity.z * deltaScaled;
|
||||
|
||||
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);
|
||||
}
|
||||
const matrix = new THREE.Matrix4();
|
||||
matrix.setPosition(particle.position);
|
||||
instancedMeshRef.current.setMatrixAt(i, matrix);
|
||||
});
|
||||
|
||||
instancedMeshRef.current.instanceMatrix.needsUpdate = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<instancedMesh ref={instancedMeshRef} args={[null, null, numParticles]} visible={scale >= 0.8}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={5}
|
||||
/>
|
||||
</instancedMesh>
|
||||
);
|
||||
};
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -1,55 +0,0 @@
|
||||
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 velocity = useRef({
|
||||
x: -Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
|
||||
useFrame((state, delta) => {
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
|
||||
// Adjust gravity and velocity based on delta
|
||||
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||
|
||||
// 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 (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);
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<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}
|
||||
emissiveIntensity={5}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
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 velocity = useRef({
|
||||
x: Math.random() * 0.05,
|
||||
y: Math.random() * 0.05,
|
||||
z: Math.random() * 0.02,
|
||||
});
|
||||
const gravity = -0.003;
|
||||
|
||||
useFrame((state, delta) => {
|
||||
let position = ref.current.position;
|
||||
let velocityVector = new THREE.Vector3(velocity.current.x, velocity.current.y, velocity.current.z);
|
||||
|
||||
// Adjust gravity and velocity based on delta
|
||||
velocity.current.y += gravity * delta * 144; // Multiply by 144 to scale for 144 FPS
|
||||
|
||||
// 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 (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);
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<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}
|
||||
emissiveIntensity={5}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
@@ -12,21 +12,17 @@ import {
|
||||
import { useFrame, useThree } from "@react-three/fiber";
|
||||
import { useRef, useState, useEffect, useCallback } from "react";
|
||||
import * as THREE from "three";
|
||||
import { Model } from "./models/Racing_kart";
|
||||
import { FrontRightWheel } from "./models/Front_Right_Wheel";
|
||||
import { FrontLeftWheel } from "./models/Front_Left_Wheel";
|
||||
import { RearWheels } from "./models/Rear_wheels";
|
||||
import gsap from "gsap";
|
||||
import { Mario } from "./models/Mario_kart";
|
||||
import { Particles1 } from "./Particles1";
|
||||
import { DriftParticlesLeft } from "./DriftParticlesLeft";
|
||||
import { DriftParticlesRight } from "./DriftParticlesRight";
|
||||
import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
|
||||
import { PointParticle } from "./PointParticle";
|
||||
import { FlameParticle } from "./FlameParticle";
|
||||
import { FlameParticles } from "./FlameParticles";
|
||||
|
||||
import { Mario } from "./models/characters/Mario_kart";
|
||||
import { DriftParticlesLeft } from "./Particles/DriftParticlesLeft";
|
||||
import { DriftParticlesRight } from "./Particles/DriftParticlesRight";
|
||||
|
||||
import { PointParticle } from "./Particles/PointParticle";
|
||||
|
||||
import { FlameParticles } from "./Particles/FlameParticles";
|
||||
import { useStore } from "./store";
|
||||
import { Cylinder } from "@react-three/drei";
|
||||
import { useGamepad } from "./useGamepad";
|
||||
|
||||
export const PlayerController = () => {
|
||||
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
||||
@@ -68,14 +64,16 @@ export const PlayerController = () => {
|
||||
let targetZPosition = 8;
|
||||
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
||||
const engineSound = useRef();
|
||||
const { buttonA, joystick, RB } = useGamepad();
|
||||
|
||||
const [scale, setScale] = useState(0);
|
||||
const { actions, addPastPosition } = useStore();
|
||||
|
||||
useFrame(({ pointer, clock }, delta) => {
|
||||
const time = clock.getElapsedTime();
|
||||
if (!body.current && !mario.current) return;
|
||||
|
||||
// console.log(buttonA, joystick);
|
||||
|
||||
// HANDLING AND STEERING
|
||||
const kartRotation =
|
||||
kart.current.rotation.y - driftDirection.current * driftForce.current;
|
||||
@@ -84,8 +82,6 @@ export const PlayerController = () => {
|
||||
0,
|
||||
-Math.cos(kartRotation)
|
||||
);
|
||||
actions.setBodyPosition(body.current.translation());
|
||||
actions.setBodyRotation(kart.current.rotation);
|
||||
|
||||
if (leftPressed && currentSpeed > 0) {
|
||||
steeringAngle = currentSteeringSpeed;
|
||||
@@ -100,6 +96,7 @@ export const PlayerController = () => {
|
||||
}
|
||||
|
||||
// mouse steering
|
||||
const steer = joystick[0] * 0.8;
|
||||
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -pointer.x;
|
||||
@@ -111,6 +108,19 @@ export const PlayerController = () => {
|
||||
steeringAngle = currentSteeringSpeed * -(pointer.x + 0.5);
|
||||
targetXPosition = -camMaxOffset * -pointer.x;
|
||||
}
|
||||
|
||||
if (steer) {
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -joystick[0];
|
||||
targetXPosition = -camMaxOffset * -joystick[0];
|
||||
} else if (driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -(joystick[0] - 1);
|
||||
targetXPosition = -camMaxOffset * -joystick[0];
|
||||
} else if (driftRight.current && !driftLeft.current) {
|
||||
steeringAngle = currentSteeringSpeed * -(joystick[0] + 1);
|
||||
targetXPosition = -camMaxOffset * -joystick[0];
|
||||
}
|
||||
}
|
||||
// ACCELERATING
|
||||
|
||||
if (upPressed && currentSpeed < maxSpeed) {
|
||||
@@ -138,6 +148,33 @@ export const PlayerController = () => {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (buttonA && currentSpeed < maxSpeed) {
|
||||
// Accelerate the kart within the maximum speed limit
|
||||
setCurrentSpeed(
|
||||
Math.min(currentSpeed + acceleration * delta * 144, maxSpeed)
|
||||
);
|
||||
} else if (
|
||||
buttonA &&
|
||||
currentSpeed > maxSpeed &&
|
||||
boostDuration.current > 0
|
||||
) {
|
||||
setCurrentSpeed(
|
||||
Math.max(currentSpeed - decceleration * delta * 144, maxSpeed)
|
||||
);
|
||||
}
|
||||
|
||||
if (buttonA) {
|
||||
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
||||
setCurrentSteeringSpeed(
|
||||
Math.min(
|
||||
currentSteeringSpeed + 0.0001 * delta * 144,
|
||||
MaxSteeringSpeed
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// REVERSING
|
||||
if (downPressed && currentSpeed < -maxSpeed) {
|
||||
setCurrentSpeed(
|
||||
@@ -145,7 +182,7 @@ export const PlayerController = () => {
|
||||
);
|
||||
}
|
||||
// DECELERATING
|
||||
else if (!upPressed && !downPressed) {
|
||||
else if (!buttonA && !downPressed) {
|
||||
if (currentSteeringSpeed > 0) {
|
||||
setCurrentSteeringSpeed(
|
||||
Math.max(currentSteeringSpeed - 0.00005 * delta * 144, 0)
|
||||
@@ -182,23 +219,46 @@ export const PlayerController = () => {
|
||||
jumpForce.current += 10;
|
||||
isOnFloor.current = false;
|
||||
jumpIsHeld.current = true;
|
||||
} else if (RB && isOnFloor.current && !jumpIsHeld.current) {
|
||||
jumpForce.current += 10;
|
||||
isOnFloor.current = false;
|
||||
jumpIsHeld.current = true;
|
||||
}
|
||||
|
||||
if (!isOnFloor.current && jumpForce.current > 0) {
|
||||
jumpForce.current -= 1 * delta * 144;
|
||||
}
|
||||
if (!jumpPressed) {
|
||||
if (!jumpPressed && !RB) {
|
||||
jumpIsHeld.current = false;
|
||||
driftDirection.current = 0;
|
||||
driftForce.current = 0;
|
||||
driftLeft.current = false;
|
||||
driftRight.current = false;
|
||||
}
|
||||
console.log(jumpIsHeld.current);
|
||||
// DRIFTING
|
||||
// if (
|
||||
// jumpIsHeld.current &&
|
||||
// currentSteeringSpeed > 0 &&
|
||||
// pointer.x < -0.1 &&
|
||||
// !driftRight.current
|
||||
// ) {
|
||||
// driftLeft.current = true;
|
||||
// }
|
||||
// if (
|
||||
// jumpIsHeld.current &&
|
||||
// currentSteeringSpeed > 0 &&
|
||||
// pointer.x > 0.1 &&
|
||||
// !driftLeft.current
|
||||
// ) {
|
||||
// driftRight.current = true;
|
||||
// }
|
||||
|
||||
if (steer) {
|
||||
if (
|
||||
jumpIsHeld.current &&
|
||||
currentSteeringSpeed > 0 &&
|
||||
pointer.x < -0.1 &&
|
||||
steer < -0.1 &&
|
||||
!driftRight.current
|
||||
) {
|
||||
driftLeft.current = true;
|
||||
@@ -206,11 +266,12 @@ export const PlayerController = () => {
|
||||
if (
|
||||
jumpIsHeld.current &&
|
||||
currentSteeringSpeed > 0 &&
|
||||
pointer.x > 0.1 &&
|
||||
steer > 0.1 &&
|
||||
!driftLeft.current
|
||||
) {
|
||||
driftRight.current = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!jumpIsHeld.current && !driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
@@ -329,7 +390,7 @@ export const PlayerController = () => {
|
||||
<RigidBody
|
||||
ref={body}
|
||||
colliders={false}
|
||||
position={[8, 20, -96]}
|
||||
position={[8, 100, -96]}
|
||||
centerOfMass={[0, -1, 0]}
|
||||
mass={3}
|
||||
ccd
|
||||
@@ -340,12 +401,8 @@ export const PlayerController = () => {
|
||||
onCollisionEnter={(event) => {
|
||||
isOnFloor.current = true;
|
||||
}}
|
||||
// onCollisionExit={(event) => {
|
||||
// isOnFloor.current = false
|
||||
// }}
|
||||
/>
|
||||
</RigidBody>
|
||||
|
||||
<group ref={kart} rotation={[0, Math.PI / 2, 0]}>
|
||||
<group ref={mario}>
|
||||
<Mario
|
||||
@@ -353,13 +410,6 @@ export const PlayerController = () => {
|
||||
steeringAngleWheels={steeringAngleWheels}
|
||||
isBoosting={isBoosting}
|
||||
/>
|
||||
{/* <pointLight
|
||||
position={[0.6, 0.05, 0.5]}
|
||||
intensity={scale}
|
||||
color={turboColor}
|
||||
distance={1}
|
||||
/> */}
|
||||
|
||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
@@ -370,12 +420,6 @@ export const PlayerController = () => {
|
||||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
{/* <pointLight
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
intensity={scale}
|
||||
color={turboColor}
|
||||
distance={1}
|
||||
/> */}
|
||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
@@ -386,15 +430,6 @@ export const PlayerController = () => {
|
||||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
<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>
|
||||
{/* <Flame/> */}
|
||||
<FlameParticles isBoosting={isBoosting} />
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
@@ -419,15 +454,12 @@ export const PlayerController = () => {
|
||||
turboColor={turboColor}
|
||||
/>
|
||||
</group>
|
||||
|
||||
{/* <ContactShadows frames={1} /> */}
|
||||
<PerspectiveCamera
|
||||
makeDefault
|
||||
position={[0, 2, 8]}
|
||||
fov={50}
|
||||
ref={cam}
|
||||
/>
|
||||
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
|
||||
@@ -1,417 +0,0 @@
|
||||
import { Controls } from "../App";
|
||||
import { BallCollider, RigidBody, useRapier } from "@react-three/rapier";
|
||||
import {
|
||||
useKeyboardControls,
|
||||
PerspectiveCamera,
|
||||
ContactShadows,
|
||||
Sphere,
|
||||
OrbitControls,
|
||||
Trail,
|
||||
PositionalAudio,
|
||||
} from "@react-three/drei";
|
||||
import { useFrame, useThree } from "@react-three/fiber";
|
||||
import { useRef, useState, useEffect, useCallback } from "react";
|
||||
import * as THREE from "three";
|
||||
import { Model } from "./models/Racing_kart";
|
||||
import { FrontRightWheel } from "./models/Front_Right_Wheel";
|
||||
import { FrontLeftWheel } from "./models/Front_Left_Wheel";
|
||||
import { RearWheels } from "./models/Rear_wheels";
|
||||
import gsap from "gsap";
|
||||
import { Mario } from "./models/Mario_kart";
|
||||
import { Particles1 } from "./Particles1";
|
||||
import { DriftParticlesLeft } from "./DriftParticlesLeft";
|
||||
import { DriftParticlesRight } from "./DriftParticlesRight";
|
||||
import FakeGlowMaterial from "./FakeGlow/FakeGlowMaterial";
|
||||
import { PointParticle } from "./PointParticle";
|
||||
import { FlameParticle } from "./FlameParticle";
|
||||
import { FlameParticles } from "./FlameParticles";
|
||||
|
||||
export const PlayerControllerAgain = () => {
|
||||
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
||||
const downPressed = useKeyboardControls((state) => state[Controls.down]);
|
||||
const leftPressed = useKeyboardControls((state) => state[Controls.left]);
|
||||
const rightPressed = useKeyboardControls((state) => state[Controls.right]);
|
||||
const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
|
||||
const [isOnGround, setIsOnGround] = useState(false);
|
||||
const body = useRef();
|
||||
const kart = useRef();
|
||||
const cam = useRef();
|
||||
const initialSpeed = 0;
|
||||
const maxSpeed = 45;
|
||||
const boostSpeed = 70;
|
||||
const acceleration = 30;
|
||||
const decceleration = 50;
|
||||
const damping = 90;
|
||||
const MaxSteeringSpeed = 1.1;
|
||||
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
|
||||
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
|
||||
const camMaxOffset = 1;
|
||||
let steeringAngle = 0;
|
||||
const isOnFloor = useRef(false);
|
||||
const jumpForce = useRef(0);
|
||||
const jumpIsHeld = useRef(false);
|
||||
const driftDirection = useRef(0);
|
||||
const driftLeft = useRef(false);
|
||||
const driftRight = useRef(false);
|
||||
const driftForce = useRef(0);
|
||||
const mario = useRef();
|
||||
const accumulatedDriftPower = useRef(0);
|
||||
const blueTurboThreshold = 10;
|
||||
const orangeTurboThreshold = 30;
|
||||
const purpleTurboThreshold = 60;
|
||||
const [turboColor, setTurboColor] = useState(0xffffff);
|
||||
const boostDuration = useRef(0);
|
||||
const [isBoosting, setIsBoosting] = useState(false);
|
||||
let targetXPosition = 0;
|
||||
let targetZPosition = 8;
|
||||
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
||||
const engineSound = useRef();
|
||||
const cameraLerpFactor = 2;
|
||||
const marioLerpFactor = 5;
|
||||
|
||||
const [scale, setScale] = useState(0);
|
||||
let lastTime = performance.now();
|
||||
|
||||
useFrame(({ pointer, clock }) => {
|
||||
const time = clock.getElapsedTime();
|
||||
const currentTime = performance.now();
|
||||
const deltaTime = (currentTime - lastTime) * 0.001;
|
||||
lastTime = currentTime;
|
||||
if (!body.current && !mario.current) return;
|
||||
|
||||
// HANDLING AND STEERING
|
||||
const kartRotation =
|
||||
kart.current.rotation.y - driftDirection.current * driftForce.current;
|
||||
const forwardDirection = new THREE.Vector3(
|
||||
-Math.sin(kartRotation),
|
||||
0,
|
||||
-Math.cos(kartRotation)
|
||||
);
|
||||
body.current.applyImpulse(
|
||||
{
|
||||
x: forwardDirection.x * currentSpeed * 50 * deltaTime,
|
||||
y: 0 + jumpForce.current,
|
||||
z: forwardDirection.z * currentSpeed * 50 * deltaTime,
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// ACCELERATING
|
||||
if (upPressed && currentSpeed < maxSpeed) {
|
||||
|
||||
setCurrentSpeed(
|
||||
Math.min(currentSpeed + acceleration * deltaTime, maxSpeed)
|
||||
);
|
||||
}
|
||||
if (!upPressed) {
|
||||
if (currentSpeed > 0) {
|
||||
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0));
|
||||
}
|
||||
if (currentSteeringSpeed > 0) {
|
||||
setCurrentSteeringSpeed(
|
||||
Math.max(currentSteeringSpeed - 1 * deltaTime, 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (upPressed) {
|
||||
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
||||
setCurrentSteeringSpeed(
|
||||
Math.min(currentSteeringSpeed + 1 * deltaTime, MaxSteeringSpeed)
|
||||
);
|
||||
}
|
||||
}
|
||||
if (leftPressed && currentSpeed > 0) {
|
||||
steeringAngle = currentSteeringSpeed;
|
||||
targetXPosition = -camMaxOffset;
|
||||
} else if (rightPressed && currentSpeed > 0) {
|
||||
steeringAngle = -currentSteeringSpeed;
|
||||
targetXPosition = camMaxOffset;
|
||||
} else {
|
||||
steeringAngle = 0;
|
||||
targetXPosition = 0;
|
||||
1;
|
||||
}
|
||||
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -pointer.x;
|
||||
targetXPosition = -camMaxOffset * -pointer.x;
|
||||
} else if (driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -(pointer.x - 0.8);
|
||||
targetXPosition = -camMaxOffset * -pointer.x;
|
||||
} else if (driftRight.current && !driftLeft.current) {
|
||||
steeringAngle = currentSteeringSpeed * -(pointer.x + 0.8);
|
||||
targetXPosition = -camMaxOffset * -pointer.x;
|
||||
}
|
||||
kart.current.rotation.y += steeringAngle * deltaTime;
|
||||
body.current.applyImpulse(
|
||||
{
|
||||
x: -body.current.linvel().x * damping * deltaTime,
|
||||
y: 0,
|
||||
z: -body.current.linvel().z * damping * deltaTime,
|
||||
},
|
||||
true
|
||||
);
|
||||
body.current.applyImpulse(
|
||||
{
|
||||
x: forwardDirection.x * currentSpeed * 50 * deltaTime,
|
||||
y: 0 + jumpForce.current,
|
||||
z: forwardDirection.z * currentSpeed * 50 * deltaTime,
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
const bodyPosition = body.current.translation();
|
||||
kart.current.position.set(
|
||||
bodyPosition.x,
|
||||
bodyPosition.y - 0.5,
|
||||
bodyPosition.z
|
||||
);
|
||||
|
||||
// JUMPING
|
||||
if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) {
|
||||
jumpForce.current += 7;
|
||||
isOnFloor.current = false;
|
||||
jumpIsHeld.current = true;
|
||||
}
|
||||
|
||||
if (!isOnFloor.current && jumpForce.current > 0) {
|
||||
jumpForce.current -= 1;
|
||||
}
|
||||
if (!jumpPressed) {
|
||||
jumpIsHeld.current = false;
|
||||
driftDirection.current = 0;
|
||||
driftForce.current = 0;
|
||||
driftLeft.current = false;
|
||||
driftRight.current = false;
|
||||
}
|
||||
|
||||
// DRIFTING
|
||||
if (
|
||||
jumpIsHeld.current &&
|
||||
currentSteeringSpeed > 0 &&
|
||||
pointer.x < -0.1 &&
|
||||
!driftRight.current
|
||||
) {
|
||||
driftLeft.current = true;
|
||||
}
|
||||
if (
|
||||
jumpIsHeld.current &&
|
||||
currentSteeringSpeed > 0 &&
|
||||
pointer.x > 0.1 &&
|
||||
!driftLeft.current
|
||||
) {
|
||||
driftRight.current = true;
|
||||
}
|
||||
|
||||
if (driftLeft.current) {
|
||||
driftDirection.current = 1;
|
||||
driftForce.current = 0.15;
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
steeringAngle * 0.5,
|
||||
marioLerpFactor * deltaTime
|
||||
);
|
||||
accumulatedDriftPower.current += 10 * (steeringAngle + 1) * deltaTime;
|
||||
}
|
||||
if (driftRight.current) {
|
||||
driftDirection.current = -1;
|
||||
driftForce.current = 0.15;
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
-(-steeringAngle) * 0.5,
|
||||
marioLerpFactor * deltaTime
|
||||
);
|
||||
accumulatedDriftPower.current += 10 * (-steeringAngle + 1) * deltaTime;
|
||||
}
|
||||
|
||||
// console.log(steeringAngle)
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
steeringAngle * 0.2,
|
||||
marioLerpFactor * deltaTime
|
||||
);
|
||||
setScale(0);
|
||||
accumulatedDriftPower.current = 0;
|
||||
setTurboColor(0xffffff);
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (accumulatedDriftPower.current > blueTurboThreshold) {
|
||||
setTurboColor(0x00ffff);
|
||||
boostDuration.current = 50;
|
||||
}
|
||||
if (accumulatedDriftPower.current > orangeTurboThreshold) {
|
||||
setTurboColor(0xffcf00);
|
||||
boostDuration.current = 100;
|
||||
}
|
||||
if (accumulatedDriftPower.current > purpleTurboThreshold) {
|
||||
setTurboColor(0xff00ff);
|
||||
boostDuration.current = 250;
|
||||
}
|
||||
|
||||
if (driftLeft.current || driftRight.current) {
|
||||
const oscillation = Math.sin(time * 1000) * 0.1;
|
||||
|
||||
const vibration = oscillation + 0.9;
|
||||
|
||||
if (turboColor === 0xffffff) {
|
||||
setScale(vibration * 0.8);
|
||||
} else {
|
||||
setScale(vibration);
|
||||
}
|
||||
}
|
||||
|
||||
// RELEASING DRIFT
|
||||
if (isBoosting) {
|
||||
setCurrentSpeed(boostSpeed);
|
||||
boostDuration.current -= deltaTime * 200;
|
||||
targetZPosition = 10;
|
||||
|
||||
if (boostDuration.current <= 0) {
|
||||
setIsBoosting(false);
|
||||
targetZPosition = 8;
|
||||
}
|
||||
} else if (boostDuration.current > 0 && !jumpIsHeld.current) {
|
||||
setIsBoosting(true);
|
||||
}
|
||||
|
||||
if (!isBoosting && currentSpeed === boostSpeed) {
|
||||
setCurrentSpeed(maxSpeed);
|
||||
}
|
||||
|
||||
|
||||
if (!isBoosting) {
|
||||
if (upPressed && currentSpeed < maxSpeed) {
|
||||
setCurrentSpeed(Math.min(currentSpeed + acceleration * deltaTime, maxSpeed));
|
||||
} else if (!upPressed && currentSpeed > 0) {
|
||||
setCurrentSpeed(Math.max(currentSpeed - decceleration * deltaTime, 0));
|
||||
}
|
||||
}
|
||||
|
||||
// Debug logging
|
||||
// console.log(`Speed: ${currentSpeed}, Boosting: ${isBoosting}, Boost Duration: ${boostDuration.current}`);
|
||||
|
||||
// CAMERA WORK
|
||||
|
||||
cam.current.position.x = THREE.MathUtils.lerp(
|
||||
cam.current.position.x,
|
||||
targetXPosition,
|
||||
cameraLerpFactor * deltaTime
|
||||
);
|
||||
|
||||
cam.current.position.z = THREE.MathUtils.lerp(
|
||||
cam.current.position.z,
|
||||
targetZPosition,
|
||||
cameraLerpFactor * deltaTime
|
||||
);
|
||||
|
||||
cam.current.updateMatrixWorld();
|
||||
|
||||
setSteeringAngleWheels(steeringAngle * 0.1);
|
||||
//misc / debug
|
||||
|
||||
// SOUND WORK
|
||||
});
|
||||
|
||||
return (
|
||||
<group>
|
||||
<RigidBody
|
||||
ref={body}
|
||||
colliders={false}
|
||||
position={[8, 20, -96]}
|
||||
centerOfMass={[0, -1, 0]}
|
||||
mass={3}
|
||||
>
|
||||
<BallCollider
|
||||
args={[0.5]}
|
||||
mass={3}
|
||||
onCollisionEnter={(event) => {
|
||||
isOnFloor.current = true;
|
||||
}}
|
||||
/>
|
||||
onCollisionEnter=
|
||||
{(event) => {
|
||||
isOnFloor.current = false;
|
||||
}}
|
||||
</RigidBody>
|
||||
|
||||
<group ref={kart} rotation={[0, Math.PI / 2, 0]}>
|
||||
<group ref={mario}>
|
||||
<Mario
|
||||
currentSpeed={currentSpeed}
|
||||
steeringAngleWheels={steeringAngleWheels}
|
||||
/>
|
||||
<pointLight
|
||||
position={[0.6, 0.05, 0.5]}
|
||||
intensity={scale}
|
||||
color={turboColor}
|
||||
distance={1}
|
||||
/>
|
||||
|
||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={100}
|
||||
transparent
|
||||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<pointLight
|
||||
position={[-0.6, 0.05, 0.5]}
|
||||
intensity={scale}
|
||||
color={turboColor}
|
||||
distance={1}
|
||||
/>
|
||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
toneMapped={false}
|
||||
emissiveIntensity={100}
|
||||
transparent
|
||||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
{/* <Flame/> */}
|
||||
<FlameParticles isBoosting={isBoosting} />
|
||||
<DriftParticlesLeft 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>
|
||||
|
||||
{/* <ContactShadows frames={1} /> */}
|
||||
<PerspectiveCamera
|
||||
makeDefault
|
||||
position={[0, 2, 8]}
|
||||
fov={40}
|
||||
ref={cam}
|
||||
/>
|
||||
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
};
|
||||
File renamed without changes.
File renamed without changes.
@@ -57,7 +57,7 @@ function setItemAt(instances, bodyPosition, bodyRotation, index) {
|
||||
.add(bodyPosition);
|
||||
|
||||
// Apply the offset to position the skid marks behind the body
|
||||
console.log(bodyPosition);
|
||||
// console.log(bodyPosition);
|
||||
o.position.copy(bodyPosition.x, bodyPosition.y + 2, bodyPosition.z);
|
||||
|
||||
o.rotation.set(0, bodyRotation, 0);
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useGLTF } from "@react-three/drei";
|
||||
import gsap from "gsap";
|
||||
|
||||
export function FrontLeftWheel({
|
||||
currentSpeed,
|
||||
left,
|
||||
right,
|
||||
...props
|
||||
}) {
|
||||
const { nodes, materials } = useGLTF("./models/front_wheel.glb");
|
||||
const wheel = useRef();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!wheel.current) return;
|
||||
if(left){
|
||||
gsap.to(wheel.current.rotation, {
|
||||
duration: 0.5,
|
||||
y: Math.PI + Math.PI / 8,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
gsap.to(wheel.current.position, {
|
||||
duration: 0.5,
|
||||
z: 0.075,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
} else if(right){
|
||||
gsap.to(wheel.current.rotation, {
|
||||
duration: 0.5,
|
||||
y: Math.PI - Math.PI / 8,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
gsap.to(wheel.current.position, {
|
||||
duration: 0.5,
|
||||
z: -0.075,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
} else if(!left && !right){
|
||||
gsap.to(wheel.current.rotation, {
|
||||
duration: 0.2,
|
||||
y: Math.PI,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
gsap.to(wheel.current.position, {
|
||||
duration: 0.2,
|
||||
z: 0,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
}
|
||||
|
||||
}, [left, right]);
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<group ref={wheel}>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Body_0001.geometry}
|
||||
material={materials.Body}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Rims_0001.geometry}
|
||||
material={materials.Rims}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Tires_0001.geometry}
|
||||
material={materials.Tires}
|
||||
/>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
useGLTF.preload("./models/front_wheel.glb");
|
||||
@@ -1,74 +0,0 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useGLTF } from "@react-three/drei";
|
||||
import gsap from "gsap";
|
||||
|
||||
export function FrontRightWheel({
|
||||
currentSpeed,
|
||||
left,
|
||||
right,
|
||||
...props
|
||||
}) {
|
||||
const { nodes, materials } = useGLTF("./models/front_wheel.glb");
|
||||
const wheel = useRef();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!wheel.current) return;
|
||||
if(left){
|
||||
gsap.to(wheel.current.rotation, {
|
||||
duration: 0.5,
|
||||
y: Math.PI / 8,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
gsap.to(wheel.current.position, {
|
||||
duration: 0.5,
|
||||
z: -0.075,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
|
||||
} else if(right){
|
||||
gsap.to(wheel.current.rotation, {
|
||||
duration: 0.5,
|
||||
y: - Math.PI / 8,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
gsap.to(wheel.current.position, {
|
||||
duration: 0.5,
|
||||
z: 0.075,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
} else if(!left && !right) {
|
||||
gsap.to(wheel.current.rotation, {
|
||||
duration: 0.2,
|
||||
y: 0,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
gsap.to(wheel.current.position, {
|
||||
duration: 0.2,
|
||||
z: 0,
|
||||
ease: "power2.inOut",
|
||||
});
|
||||
}
|
||||
|
||||
}, [left, right]);
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<group ref={wheel}>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Body_0001.geometry}
|
||||
material={materials.Body}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Rims_0001.geometry}
|
||||
material={materials.Rims}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Tires_0001.geometry}
|
||||
material={materials.Tires}
|
||||
/>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
useGLTF.preload("./models/front_wheel.glb");
|
||||
@@ -1,44 +0,0 @@
|
||||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\front_wheel.glb
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useGLTF } from "@react-three/drei";
|
||||
import gsap from "gsap";
|
||||
|
||||
export function FrontWheel({
|
||||
isLeftWheel,
|
||||
currentSpeed,
|
||||
left,
|
||||
right,
|
||||
...props
|
||||
}) {
|
||||
const { nodes, materials } = useGLTF("./models/front_wheel.glb");
|
||||
const wheel = useRef();
|
||||
const rotation = isLeftWheel ? [0, Math.PI, 0] : [0, 0, 0];
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [currentSpeed, left, right]);
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<group ref={wheel} rotation={rotation}>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Body_0001.geometry}
|
||||
material={materials.Body}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Rims_0001.geometry}
|
||||
material={materials.Rims}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FL_Wheel_Tires_0001.geometry}
|
||||
material={materials.Tires}
|
||||
/>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
useGLTF.preload("./models/front_wheel.glb");
|
||||
@@ -1,111 +0,0 @@
|
||||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\racing_kart.glb --transform
|
||||
Files: .\racing_kart.glb [1.83MB] > C:\Users\mouli\dev\r3f-vite-starter\public\models\racing_kart-transformed.glb [150.05KB] (92%)
|
||||
Author: scailman (https://sketchfab.com/scailman)
|
||||
License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
Source: https://sketchfab.com/3d-models/racing-kart-f48f8e66bba6492eadc000d2585b6a32
|
||||
Title: Racing Kart
|
||||
*/
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useGLTF } from "@react-three/drei";
|
||||
import gsap from "gsap";
|
||||
|
||||
export function Model({ steeringAngle, speed, left, right, ...props }) {
|
||||
const { nodes, materials } = useGLTF("./models/racing_kart-transformed.glb");
|
||||
|
||||
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<group rotation={[0, Math.PI, 0]}>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Visera_0.geometry}
|
||||
material={materials.Visera}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Mono1_0.geometry}
|
||||
material={materials.Mono1}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Casco2_0.geometry}
|
||||
material={materials.Casco2}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Casco_0.geometry}
|
||||
material={materials.Casco}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Piel_0.geometry}
|
||||
material={materials.Piel}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Mono2_0.geometry}
|
||||
material={materials.Mono2}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.drivers_Mono2_0_1.geometry}
|
||||
material={materials.Mono2_0}
|
||||
position={[0, 1.055, 0]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.Chassis_Rims_0.geometry}
|
||||
material={materials.Rims}
|
||||
position={[-0.221, 0.132, 0.413]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.Chassis_Chassis_0.geometry}
|
||||
material={materials.Chassis}
|
||||
position={[-0.221, 0.132, 0.413]}
|
||||
/>
|
||||
{/* <mesh
|
||||
geometry={nodes.FR_Wheel_Tires_0.geometry}
|
||||
material={materials.Tires}
|
||||
position={[-0.033, 0.157, 0.412]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.FR_Wheel_Body_0.geometry}
|
||||
material={materials.Body}
|
||||
position={[-0.033, 0.157, 0.412]}
|
||||
rotation={[-Math.PI / 2, 0, 0]}
|
||||
/> */}
|
||||
<mesh
|
||||
geometry={nodes.Body_Lines2_0.geometry}
|
||||
material={materials.Lines2}
|
||||
position={[-0.351, 0.15, -0.124]}
|
||||
rotation={[0, -1.57, 0]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.Engine_Engine_0.geometry}
|
||||
material={materials.Engine}
|
||||
position={[-0.229, 0.22, -0.465]}
|
||||
rotation={[0, -1.57, 0]}
|
||||
scale={[1.31, 1.31, 1.041]}
|
||||
/>
|
||||
<mesh
|
||||
geometry={nodes.Engine_Deposit_0.geometry}
|
||||
material={materials.Deposit}
|
||||
position={[-0.229, 0.22, -0.465]}
|
||||
rotation={[0, -1.57, 0]}
|
||||
scale={[1.31, 1.31, 1.041]}
|
||||
/>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
useGLTF.preload("./models/racing_kart-transformed.glb");
|
||||
@@ -1,33 +0,0 @@
|
||||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\rear_wheels.glb
|
||||
*/
|
||||
|
||||
import React, { useRef } from 'react'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
|
||||
export function RearWheels(props) {
|
||||
const { nodes, materials } = useGLTF('./models/rear_wheels.glb')
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<group position={[0.463, 0.157, -0.622]}>
|
||||
<group position={[-0.431, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<mesh geometry={nodes.RL_Wheel_Body_0.geometry} material={materials.Body} />
|
||||
<mesh geometry={nodes.RL_Wheel_Rims_0.geometry} material={materials.Rims} />
|
||||
<mesh geometry={nodes.RL_Wheel_Tires_0.geometry} material={materials.Tires} />
|
||||
<mesh geometry={nodes.RL_Wheel_Tires_0001.geometry} material={materials.Tires} />
|
||||
</group>
|
||||
</group>
|
||||
<group position={[-0.463, 0.157, -0.622]}>
|
||||
<group position={[0.431, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<mesh geometry={nodes.RR_Wheel_Body_0.geometry} material={materials.Body} />
|
||||
<mesh geometry={nodes.RR_Wheel_Rims_0.geometry} material={materials.Rims} />
|
||||
<mesh geometry={nodes.RR_Wheel_Tires_0.geometry} material={materials.Tires} />
|
||||
<mesh geometry={nodes.RR_Wheel_Tires_0001.geometry} material={materials.Tires} />
|
||||
</group>
|
||||
</group>
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('./models/rear_wheels.glb')
|
||||
@@ -1,21 +0,0 @@
|
||||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\spafrancorchamps-REALISTIC.glb
|
||||
*/
|
||||
|
||||
import React, { useRef } from 'react'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
import { RigidBody } from '@react-three/rapier'
|
||||
|
||||
export function Track(props) {
|
||||
const { nodes, materials } = useGLTF('./models/spafrancorchamps-REALISTIC.glb')
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<RigidBody type="fixed" name={'terrain'} colliders="trimesh" userData={'terrain'} position={[0, 1, 0]}>
|
||||
<mesh geometry={nodes.Cube.geometry} material={nodes.Cube.material} />
|
||||
</RigidBody>
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('./models/spafrancorchamps-REALISTIC.glb')
|
||||
+4
-4
@@ -6,11 +6,11 @@ Command: npx gltfjsx@6.2.16 .\mariokarttest.glb --shadows
|
||||
import React, { useRef } from 'react'
|
||||
import { Cylinder, OrbitControls, Sphere, useGLTF } from '@react-three/drei'
|
||||
import { useFrame } from '@react-three/fiber'
|
||||
import FakeGlowMaterial from '../FakeGlow/FakeGlowMaterial'
|
||||
import FakeFlame from '../FakeFlame/FakeFlame'
|
||||
import FakeGlowMaterial from '../../ShaderMaterials/FakeGlow/FakeGlowMaterial'
|
||||
import FakeFlame from '../../ShaderMaterials/FakeFlame/FakeFlame'
|
||||
|
||||
export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props }) {
|
||||
const { nodes, materials } = useGLTF('./models/mariokarttest.glb')
|
||||
const { nodes, materials } = useGLTF('./models/characters/mariokarttest.glb')
|
||||
|
||||
const frontLeftWheel = useRef()
|
||||
const frontRightWheel = useRef()
|
||||
@@ -123,4 +123,4 @@ export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('./models/mariokarttest.glb')
|
||||
useGLTF.preload('./models/characters/mariokarttest.glb')
|
||||
+2
-2
@@ -13,7 +13,7 @@ import { useGLTF } from '@react-three/drei'
|
||||
import { RigidBody } from '@react-three/rapier'
|
||||
|
||||
export function Paris(props) {
|
||||
const { nodes, materials } = useGLTF('./models/tour_paris_promenade-transformed.glb')
|
||||
const { nodes, materials } = useGLTF('./models/tracks/tour_paris_promenade-transformed.glb')
|
||||
materials.M_Cmn_ShadowCollision.opacity = 0
|
||||
materials.M_Cmn_ShadowCollision.transparent = true
|
||||
return (
|
||||
@@ -35,4 +35,4 @@ export function Paris(props) {
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('./models/tour_paris_promenade-transformed.glb')
|
||||
useGLTF.preload('./models/tracks/tour_paris_promenade-transformed.glb')
|
||||
@@ -6,6 +6,39 @@ export const useStore = create((set, get) => ({
|
||||
bodyPosition: [0, 0, 0],
|
||||
bodyRotation: [0, 0, 0],
|
||||
pastPositions: [],
|
||||
LeftAxis: [0, 0],
|
||||
buttons : {
|
||||
A: false,
|
||||
B: false,
|
||||
X: false,
|
||||
Y: false,
|
||||
LB: false,
|
||||
RB: false,
|
||||
LT: false,
|
||||
RT: false,
|
||||
Back: false,
|
||||
Start: false,
|
||||
LeftStick: false,
|
||||
RightStick: false,
|
||||
Up: false,
|
||||
Down: false,
|
||||
Left: false,
|
||||
Right: false,
|
||||
},
|
||||
setLeftAxis: (axis) => {
|
||||
set({ LeftAxis: axis });
|
||||
},
|
||||
setButtons: (button, value) => {
|
||||
set((state) => ({
|
||||
buttons: {
|
||||
...state.buttons,
|
||||
[button]: value,
|
||||
},
|
||||
}));
|
||||
},
|
||||
getButtons: () => {
|
||||
return get().buttons;
|
||||
},
|
||||
addPastPosition: (position) => {
|
||||
set((state) => ({
|
||||
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export const useGamepad = () => {
|
||||
const [gamepadInfo, setGamepadInfo] = useState({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
|
||||
|
||||
// Function to update gamepad state
|
||||
const updateGamepadState = () => {
|
||||
const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];
|
||||
const gamepad = gamepads[0]; // Assuming the first gamepad
|
||||
|
||||
if (gamepad) {
|
||||
const newGamepadInfo = {
|
||||
connected: true,
|
||||
buttonA: gamepad.buttons[0].pressed,
|
||||
RB: gamepad.buttons[5].pressed,
|
||||
joystick: [gamepad.axes[0], gamepad.axes[1]]
|
||||
};
|
||||
|
||||
// Update state only if there's a change
|
||||
if (JSON.stringify(newGamepadInfo) !== JSON.stringify(gamepadInfo)) {
|
||||
setGamepadInfo(newGamepadInfo);
|
||||
}
|
||||
} else {
|
||||
if (gamepadInfo.connected) {
|
||||
setGamepadInfo({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const gamepadConnected = () => {
|
||||
console.log('Gamepad connected!');
|
||||
updateGamepadState();
|
||||
};
|
||||
|
||||
const gamepadDisconnected = () => {
|
||||
console.log('Gamepad disconnected!');
|
||||
setGamepadInfo({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
|
||||
};
|
||||
|
||||
window.addEventListener('gamepadconnected', gamepadConnected);
|
||||
window.addEventListener('gamepaddisconnected', gamepadDisconnected);
|
||||
|
||||
// Polling the gamepad state
|
||||
const interval = setInterval(updateGamepadState, 100);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('gamepadconnected', gamepadConnected);
|
||||
window.removeEventListener('gamepaddisconnected', gamepadDisconnected);
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, [gamepadInfo]);
|
||||
|
||||
return gamepadInfo;
|
||||
};
|
||||
Reference in new issue
Block a user