Merge pull request #2 from Lunakepio/gamepadSupport

sanitized the project, deleted unused assets and added a real yet sim…
This commit is contained in:
Lunakepio authored and GitHub committed 2024-01-26 05:00:12 +01:00
commit f356585be2
41 files changed
+67 -855

No files matched your search

+45 -45
View File
@@ -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",
"leva": "^0.9.35",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.160.0",
"react-gamepad": "^1.0.3",
"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",
@@ -2194,21 +2193,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",
@@ -2599,6 +2583,14 @@
"react": ">= 16.8"
}
},
"node_modules/react-gamepad": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/react-gamepad/-/react-gamepad-1.0.3.tgz",
"integrity": "sha512-gMwITmfoHtCaMFpDaEshcjeibHAgynXD28NnS2pa+dG+stwNoN66YDVizN7GfyIrYiW5Ft1ubRxs6/2xW9sRhQ==",
"peerDependencies": {
"react": ">=15.0.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -2893,22 +2885,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 +2958,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 +3006,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 +3047,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
View File
@@ -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",
"leva": "^0.9.35",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.160.0",
"react-gamepad": "^1.0.3",
"three": "^0.160.1",
"zustand": "^4.5.0"
},
"devDependencies": {
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.
+4 -15
View File
@@ -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} />
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+8 -13
View File
@@ -12,19 +12,14 @@ 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";
-417
View File
@@ -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>
);
};
@@ -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");
-44
View File
@@ -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");
-111
View File
@@ -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");
-33
View File
@@ -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')
@@ -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')
@@ -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')