initial commit
parent
3634209a4e
commit
f4f6028a88
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 c:\Users\mouli\Downloads\mario_kart.glb -o c:\Users\mouli\Desktop\mario_kart.tsx --types
|
||||
Author: TheShibeLord (https://sketchfab.com/TheShibeLord)
|
||||
License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
Source: https://sketchfab.com/3d-models/mario-kart-66cc131575344ab69238ec5872f24927
|
||||
Title: Mario Kart
|
||||
*/
|
||||
|
||||
import * as THREE from 'three'
|
||||
import React, { useRef } from 'react'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
import { GLTF } from 'three-stdlib'
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
mt_mario: THREE.Mesh
|
||||
mt_kart_Mario_S: THREE.Mesh
|
||||
mt_Kart_Mario_Tire_S: THREE.Mesh
|
||||
}
|
||||
materials: {
|
||||
mt_mario: THREE.MeshStandardMaterial
|
||||
mt_kart_Mario_S: THREE.MeshStandardMaterial
|
||||
mt_Kart_Mario_Tire_S: THREE.MeshStandardMaterial
|
||||
}
|
||||
animations: GLTFAction[]
|
||||
}
|
||||
|
||||
type ContextType = Record<string, React.ForwardRefExoticComponent<JSX.IntrinsicElements['mesh']>>
|
||||
|
||||
export function Model(props: JSX.IntrinsicElements['group']) {
|
||||
const { nodes, materials } = useGLTF('/mario_kart.glb') as GLTFResult
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<group rotation={[-Math.PI / 2, 0, 0]}>
|
||||
<group rotation={[Math.PI / 2, 0, 0]}>
|
||||
<mesh geometry={nodes.mt_mario.geometry} material={materials.mt_mario} />
|
||||
<mesh geometry={nodes.mt_kart_Mario_S.geometry} material={materials.mt_kart_Mario_S} />
|
||||
<mesh geometry={nodes.mt_Kart_Mario_Tire_S.geometry} material={materials.mt_Kart_Mario_Tire_S} />
|
||||
</group>
|
||||
</group>
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('/mario_kart.glb')
|
|
@ -11,6 +11,7 @@
|
|||
"@react-three/drei": "^9.93.0",
|
||||
"@react-three/fiber": "^8.15.13",
|
||||
"@react-three/postprocessing": "^2.15.11",
|
||||
"@react-three/rapier": "^1.2.1",
|
||||
"gsap": "^3.12.4",
|
||||
"leva": "^0.9.35",
|
||||
"react": "^18.2.0",
|
||||
|
@ -35,6 +36,40 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@chevrotain/cst-dts-gen": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-10.5.0.tgz",
|
||||
"integrity": "sha512-lhmC/FyqQ2o7pGK4Om+hzuDrm9rhFYIJ/AXoQBeongmn870Xeb0L6oGEiuR8nohFNL5sMaQEJWCxr1oIVIVXrw==",
|
||||
"dependencies": {
|
||||
"@chevrotain/gast": "10.5.0",
|
||||
"@chevrotain/types": "10.5.0",
|
||||
"lodash": "4.17.21"
|
||||
}
|
||||
},
|
||||
"node_modules/@chevrotain/gast": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-10.5.0.tgz",
|
||||
"integrity": "sha512-pXdMJ9XeDAbgOWKuD1Fldz4ieCs6+nLNmyVhe2gZVqoO7v8HXuHYs5OV2EzUtbuai37TlOAQHrTDvxMnvMJz3A==",
|
||||
"dependencies": {
|
||||
"@chevrotain/types": "10.5.0",
|
||||
"lodash": "4.17.21"
|
||||
}
|
||||
},
|
||||
"node_modules/@chevrotain/types": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-10.5.0.tgz",
|
||||
"integrity": "sha512-f1MAia0x/pAVPWH/T73BJVyO2XU5tI4/iE7cnxb7tqdNTNhQI3Uq3XkqcoteTmD4t1aM0LbHCJOhgIDn07kl2A=="
|
||||
},
|
||||
"node_modules/@chevrotain/utils": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-10.5.0.tgz",
|
||||
"integrity": "sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ=="
|
||||
},
|
||||
"node_modules/@dimforge/rapier3d-compat": {
|
||||
"version": "0.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.11.2.tgz",
|
||||
"integrity": "sha512-vdWmlkpS3G8nGAzLuK7GYTpNdrkn/0NKCe0l1Jqxc7ZZOB3N0q9uG/Ap9l9bothWuAvxscIt0U97GVLr0lXWLg=="
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
|
||||
|
@ -1019,6 +1054,42 @@
|
|||
"three": ">=0.144.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-three/rapier": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-three/rapier/-/rapier-1.2.1.tgz",
|
||||
"integrity": "sha512-h22uqwvMBVVmwfe37fs0tF3u+gNDJv/LzS4lRYnZ4IaHZPlprAjvccef6R7pFlW2EU/o26HhzTMoE5/Btkdcew==",
|
||||
"dependencies": {
|
||||
"@dimforge/rapier3d-compat": "0.11.2",
|
||||
"three-stdlib": "2.23.9",
|
||||
"use-asset": "1.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@react-three/fiber": ">=8.9.0",
|
||||
"react": ">=18.0.0",
|
||||
"three": ">=0.139.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-three/rapier/node_modules/three-stdlib": {
|
||||
"version": "2.23.9",
|
||||
"resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.23.9.tgz",
|
||||
"integrity": "sha512-fYBClVGQptD7UZcoRZGNlR3sKcUW37hVPoEW1v68E4XuiwD0Ml/VqDUJ0yEMVE2DlooDvqgqv/rIcHC/B4N5pg==",
|
||||
"dependencies": {
|
||||
"@types/draco3d": "^1.4.0",
|
||||
"@types/offscreencanvas": "^2019.6.4",
|
||||
"@types/webxr": "^0.5.2",
|
||||
"chevrotain": "^10.1.2",
|
||||
"draco3d": "^1.4.1",
|
||||
"fflate": "^0.6.9",
|
||||
"ktx-parse": "^0.4.5",
|
||||
"mmd-parser": "^1.0.4",
|
||||
"opentype.js": "^1.3.3",
|
||||
"potpack": "^1.0.1",
|
||||
"zstddec": "^0.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"three": ">=0.128.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@stitches/react": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz",
|
||||
|
@ -1470,6 +1541,19 @@
|
|||
"three": ">=0.126.1"
|
||||
}
|
||||
},
|
||||
"node_modules/chevrotain": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-10.5.0.tgz",
|
||||
"integrity": "sha512-Pkv5rBY3+CsHOYfV5g/Vs5JY9WTHHDEKOlohI2XeygaZhUeqhAlldZ8Hz9cRmxu709bvS08YzxHdTPHhffc13A==",
|
||||
"dependencies": {
|
||||
"@chevrotain/cst-dts-gen": "10.5.0",
|
||||
"@chevrotain/gast": "10.5.0",
|
||||
"@chevrotain/types": "10.5.0",
|
||||
"@chevrotain/utils": "10.5.0",
|
||||
"lodash": "4.17.21",
|
||||
"regexp-to-ast": "0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/colord": {
|
||||
"version": "2.9.3",
|
||||
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
|
||||
|
@ -1741,6 +1825,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"node_modules/fflate": {
|
||||
"version": "0.6.10",
|
||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
|
||||
|
@ -2024,6 +2113,11 @@
|
|||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"node_modules/ktx-parse": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.4.5.tgz",
|
||||
"integrity": "sha512-MK3FOody4TXbFf8Yqv7EBbySw7aPvEcPX++Ipt6Sox+/YMFvR5xaTyhfNSk1AEmMy+RYIw81ctN4IMxCB8OAlg=="
|
||||
},
|
||||
"node_modules/leva": {
|
||||
"version": "0.9.35",
|
||||
"resolved": "https://registry.npmjs.org/leva/-/leva-0.9.35.tgz",
|
||||
|
@ -2046,6 +2140,11 @@
|
|||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"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",
|
||||
|
@ -2172,6 +2271,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mmd-parser": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mmd-parser/-/mmd-parser-1.0.4.tgz",
|
||||
"integrity": "sha512-Qi0VCU46t2IwfGv5KF0+D/t9cizcDug7qnNoy9Ggk7aucp0tssV8IwTMkBlDbm+VqAf3cdQHTCARKSsuS2MYFg=="
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
|
@ -2243,6 +2347,21 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/opentype.js": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/opentype.js/-/opentype.js-1.3.4.tgz",
|
||||
"integrity": "sha512-d2JE9RP/6uagpQAVtJoF0pJJA/fgai89Cc50Yp0EJHk+eLp6QQ7gBoblsnubRULNY132I0J1QKMJ+JTbMqz4sw==",
|
||||
"dependencies": {
|
||||
"string.prototype.codepointat": "^0.2.1",
|
||||
"tiny-inflate": "^1.0.3"
|
||||
},
|
||||
"bin": {
|
||||
"ot": "bin/ot"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
|
@ -2485,6 +2604,11 @@
|
|||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
|
||||
},
|
||||
"node_modules/regexp-to-ast": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz",
|
||||
"integrity": "sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw=="
|
||||
},
|
||||
"node_modules/require-from-string": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
|
||||
|
@ -2706,6 +2830,11 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/string.prototype.codepointat": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
|
||||
"integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg=="
|
||||
},
|
||||
"node_modules/suspend-react": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
|
||||
|
@ -2743,6 +2872,11 @@
|
|||
"three": ">=0.128.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-inflate": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
|
||||
"integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
|
||||
},
|
||||
"node_modules/toidentifier": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
|
@ -2803,6 +2937,17 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/use-asset": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/use-asset/-/use-asset-1.0.4.tgz",
|
||||
"integrity": "sha512-7/hqDrWa0iMnCoET9W1T07EmD4Eg/Wmoj/X8TGBc++ECRK4m5yTsjP4O6s0yagbxfqIOuUkIxe2/sA+VR2GxZA==",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/utility-types": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
|
||||
|
@ -2923,6 +3068,11 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/zstddec": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz",
|
||||
"integrity": "sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA=="
|
||||
},
|
||||
"node_modules/zustand": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
"@react-three/drei": "^9.93.0",
|
||||
"@react-three/fiber": "^8.15.13",
|
||||
"@react-three/postprocessing": "^2.15.11",
|
||||
"@react-three/rapier": "^1.2.1",
|
||||
"gsap": "^3.12.4",
|
||||
"leva": "^0.9.35",
|
||||
"react": "^18.2.0",
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\mariokart.glb --transform --shadows
|
||||
Files: .\mariokart.glb [101.9KB] > C:\Users\mouli\dev\r3f-vite-starter\public\models\mariokart-transformed.glb [26.36KB] (74%)
|
||||
*/
|
||||
|
||||
import React, { useRef } from 'react'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
|
||||
export function ario(props) {
|
||||
const { nodes, materials } = useGLTF('/mariokart-transformed.glb')
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<mesh castShadow receiveShadow geometry={nodes.mt_kart_Mario_S.geometry} material={materials.mt_kart_Mario_S} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.mt_Kart_Mario_Tire_S001.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[0, 0.22, -0.347]} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.mt_mario.geometry} material={materials.mt_mario} />
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('/mariokart-transformed.glb')
|
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.
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 c:\Users\mouli\dev\r3f-vite-starter\public\models\mariokarttest.glb -o c:\Users\mouli\dev\r3f-vite-starter\public\models\mariokarttest.tsx --types
|
||||
*/
|
||||
|
||||
import * as THREE from 'three'
|
||||
import React, { useRef } from 'react'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
import { GLTF } from 'three-stdlib'
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
mt_kart_Mario_S: THREE.Mesh
|
||||
mt_Kart_Mario_Tire_S001: THREE.Mesh
|
||||
mt_Kart_Mario_Tire_S002: THREE.Mesh
|
||||
mt_Kart_Mario_Tire_S003: THREE.Mesh
|
||||
mt_mario: THREE.Mesh
|
||||
}
|
||||
materials: {
|
||||
mt_kart_Mario_S: THREE.MeshStandardMaterial
|
||||
mt_Kart_Mario_Tire_S: THREE.MeshStandardMaterial
|
||||
mt_mario: THREE.MeshStandardMaterial
|
||||
}
|
||||
animations: GLTFAction[]
|
||||
}
|
||||
|
||||
type ContextType = Record<string, React.ForwardRefExoticComponent<JSX.IntrinsicElements['mesh']>>
|
||||
|
||||
export function Model(props: JSX.IntrinsicElements['group']) {
|
||||
const { nodes, materials } = useGLTF('/mariokarttest.glb') as GLTFResult
|
||||
return (
|
||||
<group {...props} dispose={null}>
|
||||
<mesh geometry={nodes.mt_kart_Mario_S.geometry} material={materials.mt_kart_Mario_S} />
|
||||
<mesh geometry={nodes.mt_Kart_Mario_Tire_S001.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[0, 0.22, -0.347]} />
|
||||
<mesh geometry={nodes.mt_Kart_Mario_Tire_S002.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[0.384, 0.193, 0.441]} />
|
||||
<mesh geometry={nodes.mt_Kart_Mario_Tire_S003.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[-0.393, 0.193, 0.441]} rotation={[-Math.PI, 0, 0]} scale={-1} />
|
||||
<mesh geometry={nodes.mt_mario.geometry} material={materials.mt_mario} />
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('/mariokarttest.glb')
|
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.
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
46
src/App.jsx
46
src/App.jsx
|
@ -1,11 +1,51 @@
|
|||
import { Canvas } from "@react-three/fiber";
|
||||
import { Experience } from "./components/Experience";
|
||||
import { Suspense, useMemo } from "react";
|
||||
import { Physics } from "@react-three/rapier";
|
||||
import {
|
||||
KeyboardControls,
|
||||
Loader,
|
||||
OrbitControls,
|
||||
Preload,
|
||||
Stats,
|
||||
} from "@react-three/drei";
|
||||
|
||||
export const Controls = {
|
||||
up: "up",
|
||||
down: "down",
|
||||
left: "left",
|
||||
right: "right",
|
||||
boost: "boost",
|
||||
shoot: "shoot",
|
||||
slow: "slow",
|
||||
reset: "reset",
|
||||
};
|
||||
function App() {
|
||||
|
||||
|
||||
const map = useMemo(
|
||||
() => [
|
||||
{ name: Controls.up, keys: ["KeyW", "ArrowUp"] },
|
||||
{ name: Controls.down, keys: ["KeyS", "ArrowDown"] },
|
||||
{ name: Controls.left, keys: ["KeyA", "ArrowLeft"] },
|
||||
{ name: Controls.right, keys: ["KeyD", "ArrowRight"] },
|
||||
{ name: Controls.jump, keys: ["Space"] },
|
||||
{ name: Controls.slow, keys: ["Shift"] },
|
||||
{ name: Controls.shoot, keys: ["KeyE", "Click"] },
|
||||
{ name: Controls.reset, keys: ["KeyR"] },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<Canvas shadows camera={{ position: [3, 3, 3], fov: 30 }}>
|
||||
<color attach="background" args={["#ececec"]} />
|
||||
<Experience />
|
||||
<Canvas shadows>
|
||||
<Suspense fallback={null}>
|
||||
<Physics gravity={[0,-90,0]}>
|
||||
<KeyboardControls map={map}>
|
||||
<Experience />
|
||||
</KeyboardControls>
|
||||
</Physics>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,13 +1,46 @@
|
|||
import { OrbitControls } from "@react-three/drei";
|
||||
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} from '@react-three/postprocessing'
|
||||
|
||||
export const Experience = () => {
|
||||
return (
|
||||
<>
|
||||
<OrbitControls />
|
||||
<mesh>
|
||||
<boxGeometry />
|
||||
<meshNormalMaterial />
|
||||
</mesh>
|
||||
<PlayerController />
|
||||
<Ground position={[0, 0, 0]} />
|
||||
<Environment resolution={256} preset='lobby'/>
|
||||
|
||||
<directionalLight
|
||||
|
||||
position={[10, 50,-30]}
|
||||
intensity={1}
|
||||
shadow-bias={-0.0001}
|
||||
shadow-mapSize={[4096, 4096]}
|
||||
shadow-camera-left={-300}
|
||||
shadow-camera-right={300}
|
||||
shadow-camera-top={300}
|
||||
shadow-camera-bottom={-3000}
|
||||
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}>
|
||||
{/* <N8AO distanceFalloff={1} aoRadius={1} intensity={4} /> */}
|
||||
<Bloom luminanceThreshold={0} mipmapBlur luminanceSmoothing={0.01} intensity={0.5} />
|
||||
<DepthOfField target={[0, 0, 13]} focalLength={0.3} bokehScale={15} height={700} />
|
||||
{/* <TiltShift2/> */}
|
||||
<HueSaturation saturation={0.1} />
|
||||
</EffectComposer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
import { RigidBody } from "@react-three/rapier";
|
||||
|
||||
export const Ground = (props) => {
|
||||
return (
|
||||
<RigidBody type="fixed" {...props}>
|
||||
<mesh transparent receiveShadow rotation={[-Math.PI/2 , 0 ,0]}>
|
||||
<planeGeometry args={[1000, 1000, 1000]} />
|
||||
<meshStandardMaterial color="yellow" opacity={0} transparent/>
|
||||
</mesh>
|
||||
</RigidBody>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,2 @@
|
|||
export const Particles1 = () => {
|
||||
}
|
|
@ -0,0 +1,329 @@
|
|||
import { Controls } from "../App";
|
||||
import { RigidBody, useRapier } from "@react-three/rapier";
|
||||
import {
|
||||
useKeyboardControls,
|
||||
PerspectiveCamera,
|
||||
ContactShadows,
|
||||
} 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";
|
||||
|
||||
export const PlayerController = () => {
|
||||
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 = 30;
|
||||
const boostSpeed = 50;
|
||||
const acceleration = 0.1;
|
||||
const decceleration = 0.2;
|
||||
const damping = 0.001;
|
||||
const MaxSteeringSpeed = 0.01;
|
||||
const [currentSteeringSpeed, setCurrentSteeringSpeed] = useState(0);
|
||||
const [currentSpeed, setCurrentSpeed] = useState(initialSpeed);
|
||||
const camMaxOffset = 0.5;
|
||||
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 = useRef(false);
|
||||
let targetXPosition = 0;
|
||||
let targetZPosition = 8;
|
||||
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
||||
|
||||
const [scale, setScale] = useState(0);
|
||||
|
||||
useFrame(({ pointer, clock }) => {
|
||||
const time = clock.getElapsedTime();
|
||||
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)
|
||||
);
|
||||
|
||||
if (leftPressed && currentSpeed > 0) {
|
||||
steeringAngle = currentSteeringSpeed;
|
||||
targetXPosition = -camMaxOffset;
|
||||
} else if (rightPressed && currentSpeed > 0) {
|
||||
steeringAngle = -currentSteeringSpeed;
|
||||
targetXPosition = camMaxOffset;
|
||||
} else {
|
||||
steeringAngle = 0;
|
||||
targetXPosition = 0;
|
||||
1;
|
||||
}
|
||||
|
||||
// mouse steering
|
||||
steeringAngle = currentSteeringSpeed * -pointer.x;
|
||||
targetXPosition = -camMaxOffset * -pointer.x;
|
||||
|
||||
// ACCELERATING
|
||||
|
||||
if (upPressed && currentSpeed < maxSpeed) {
|
||||
// Accelerate the kart within the maximum speed limit
|
||||
setCurrentSpeed(Math.min(currentSpeed + acceleration, maxSpeed));
|
||||
} else if (upPressed && currentSpeed > maxSpeed && boostDuration.current > 0){
|
||||
setCurrentSpeed(Math.max(currentSpeed - decceleration, maxSpeed));
|
||||
}
|
||||
|
||||
if (upPressed) {
|
||||
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
||||
setCurrentSteeringSpeed(
|
||||
Math.min(currentSteeringSpeed + 0.0001, MaxSteeringSpeed)
|
||||
);
|
||||
}
|
||||
}
|
||||
// REVERSING
|
||||
if (downPressed && currentSpeed < -maxSpeed) {
|
||||
setCurrentSpeed(Math.max(currentSpeed - acceleration, -maxSpeed));
|
||||
}
|
||||
// DECELERATING
|
||||
else if (!upPressed && !downPressed) {
|
||||
if (currentSteeringSpeed > 0) {
|
||||
setCurrentSteeringSpeed(Math.max(currentSteeringSpeed - 0.00005, 0));
|
||||
} else if (currentSteeringSpeed < 0) {
|
||||
setCurrentSteeringSpeed(Math.min(currentSteeringSpeed + 0.00005, 0));
|
||||
}
|
||||
setCurrentSpeed(Math.max(currentSpeed - decceleration, 0));
|
||||
}
|
||||
|
||||
|
||||
// Update the kart's rotation based on the steering angle
|
||||
kart.current.rotation.y += steeringAngle;
|
||||
|
||||
// Apply damping to simulate slowdown when no keys are pressed
|
||||
body.current.applyImpulse(
|
||||
{
|
||||
x: -body.current.linvel().x * (1 - damping),
|
||||
y: 0,
|
||||
z: -body.current.linvel().z * (1 - damping),
|
||||
},
|
||||
true
|
||||
);
|
||||
const bodyPosition = body.current.translation();
|
||||
kart.current.position.set(
|
||||
bodyPosition.x,
|
||||
bodyPosition.y - 1,
|
||||
bodyPosition.z
|
||||
);
|
||||
|
||||
// JUMPING
|
||||
if (jumpPressed && isOnFloor.current && !jumpIsHeld.current) {
|
||||
jumpForce.current += 11;
|
||||
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.24 &&
|
||||
!driftRight.current
|
||||
) {
|
||||
driftLeft.current = true;
|
||||
}
|
||||
if (
|
||||
jumpIsHeld.current &&
|
||||
currentSteeringSpeed > 0 &&
|
||||
pointer.x > 0.24 &&
|
||||
!driftLeft.current
|
||||
) {
|
||||
driftRight.current = true;
|
||||
}
|
||||
|
||||
if (!jumpIsHeld.current && !driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
0,
|
||||
0.001
|
||||
);
|
||||
setTurboColor(0xffffff);
|
||||
accumulatedDriftPower.current = 0;
|
||||
|
||||
}
|
||||
|
||||
if (driftLeft.current) {
|
||||
driftDirection.current = 1;
|
||||
driftForce.current = 0.4;
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
(steeringAngle * 50 + 0.5),
|
||||
0.1
|
||||
);
|
||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1);
|
||||
}
|
||||
if (driftRight.current) {
|
||||
driftDirection.current = -1;
|
||||
driftForce.current = 0.4;
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
-(-steeringAngle * 50 + 0.5),
|
||||
0.1
|
||||
);
|
||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1);
|
||||
}
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||
mario.current.rotation.y,
|
||||
steeringAngle * 30,
|
||||
0.1
|
||||
);
|
||||
setScale(0);
|
||||
}
|
||||
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;
|
||||
setScale(vibration);
|
||||
}
|
||||
// RELEASING DRIFT
|
||||
|
||||
if (boostDuration.current > 1 && !jumpIsHeld.current) {
|
||||
setCurrentSpeed(boostSpeed);
|
||||
boostDuration.current -= 1;
|
||||
targetZPosition = 10;
|
||||
} else if (boostDuration.current <= 1) {
|
||||
targetZPosition = 8;
|
||||
}
|
||||
|
||||
|
||||
// CAMERA WORK
|
||||
|
||||
cam.current.updateMatrixWorld();
|
||||
|
||||
cam.current.position.x = THREE.MathUtils.lerp(
|
||||
cam.current.position.x,
|
||||
targetXPosition,
|
||||
0.01
|
||||
);
|
||||
|
||||
cam.current.position.z = THREE.MathUtils.lerp(
|
||||
cam.current.position.z,
|
||||
targetZPosition,
|
||||
0.01
|
||||
);
|
||||
cam.current.updateMatrixWorld();
|
||||
|
||||
body.current.applyImpulse(
|
||||
{
|
||||
x: forwardDirection.x * currentSpeed,
|
||||
y: 0 + jumpForce.current,
|
||||
z: forwardDirection.z * currentSpeed,
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
// Update the kart's rotation based on the steering angle
|
||||
setSteeringAngleWheels(steeringAngle * 25);
|
||||
console.log(scale)
|
||||
});
|
||||
|
||||
return (
|
||||
<group>
|
||||
<RigidBody
|
||||
ref={body}
|
||||
type="dynamic"
|
||||
colliders="ball"
|
||||
position={[0, 20, 0]}
|
||||
centerOfMass={[0, -1, 0]}
|
||||
onCollisionEnter={(event) => {
|
||||
isOnFloor.current = true;
|
||||
}}
|
||||
>
|
||||
<mesh transparent>
|
||||
<sphereGeometry args={[1, 6, 6]} />
|
||||
<meshStandardMaterial color="blue" transparent opacity={0} />
|
||||
</mesh>
|
||||
</RigidBody>
|
||||
|
||||
<group ref={kart}>
|
||||
<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={2} transparent opacity={1}/>
|
||||
</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={2} transparent opacity={1}/>
|
||||
</mesh>
|
||||
</group>
|
||||
|
||||
{/* <ContactShadows frames={1} /> */}
|
||||
<PerspectiveCamera
|
||||
makeDefault
|
||||
position={[0, 2, 8]}
|
||||
fov={50}
|
||||
ref={cam}
|
||||
/>
|
||||
</group>
|
||||
</group>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,73 @@
|
|||
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");
|
|
@ -0,0 +1,74 @@
|
|||
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");
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
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");
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\mariokarttest.glb --shadows
|
||||
*/
|
||||
|
||||
import React, { useRef } from 'react'
|
||||
import { useGLTF } from '@react-three/drei'
|
||||
import { useFrame } from '@react-three/fiber'
|
||||
|
||||
export function Mario({currentSpeed, steeringAngleWheels, ...props}) {
|
||||
const { nodes, materials } = useGLTF('./models/mariokarttest.glb')
|
||||
|
||||
const frontLeftWheel = useRef()
|
||||
const frontRightWheel = useRef()
|
||||
const rearWheels = useRef()
|
||||
const frontWheels = useRef()
|
||||
|
||||
useFrame(() => {
|
||||
const rotation = currentSpeed / 100
|
||||
frontLeftWheel.current.rotation.x += rotation
|
||||
frontRightWheel.current.rotation.x += rotation
|
||||
rearWheels.current.rotation.x += rotation
|
||||
frontWheels.current.rotation.y = steeringAngleWheels
|
||||
|
||||
})
|
||||
return (
|
||||
<group {...props} rotation={[0, Math.PI, 0]} dispose={null}>
|
||||
<mesh castShadow receiveShadow geometry={nodes.mt_kart_Mario_S.geometry} material={materials.mt_kart_Mario_S} />
|
||||
<mesh ref={rearWheels} castShadow receiveShadow geometry={nodes.mt_Kart_Mario_Tire_S001.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[0, 0.22, -0.347]} />
|
||||
<group ref={frontWheels} >
|
||||
<mesh ref={frontLeftWheel} castShadow receiveShadow geometry={nodes.mt_Kart_Mario_Tire_S002.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[0.370, 0.193, 0.441]} />
|
||||
<mesh ref={frontRightWheel} castShadow receiveShadow geometry={nodes.mt_Kart_Mario_Tire_S003.geometry} material={materials.mt_Kart_Mario_Tire_S} position={[-0.370, 0.193, 0.441]} rotation={[-Math.PI, 0, 0]} scale={-1} />
|
||||
</group>
|
||||
<mesh castShadow receiveShadow geometry={nodes.mt_mario.geometry} material={materials.mt_mario} />
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('./models/mariokarttest.glb')
|
|
@ -0,0 +1,111 @@
|
|||
/*
|
||||
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");
|
|
@ -0,0 +1,33 @@
|
|||
/*
|
||||
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')
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
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')
|
|
@ -0,0 +1,38 @@
|
|||
/*
|
||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
||||
Command: npx gltfjsx@6.2.16 .\tour_paris_promenade.glb --transform --shadows
|
||||
Files: .\tour_paris_promenade.glb [51.35MB] > C:\Users\mouli\dev\r3f-vite-starter\public\models\tour_paris_promenade-transformed.glb [2.24MB] (96%)
|
||||
Author: amogusstrikesback2 (https://sketchfab.com/amogusstrikesback2)
|
||||
License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
Source: https://sketchfab.com/3d-models/tour-paris-promenade-9d9b5dcfd6504ea0b582d36687e10fab
|
||||
Title: tour paris promenade
|
||||
*/
|
||||
|
||||
import React, { useRef } from 'react'
|
||||
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')
|
||||
materials.M_Cmn_ShadowCollision.opacity = 0
|
||||
materials.M_Cmn_ShadowCollision.transparent = true
|
||||
return (
|
||||
<group {...props} scale={40} position={[0,-3.6,0]}dispose={null}>
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Road_Ground_M_Cmn_MainColor_Detail_0.geometry} material={materials.M_Cmn_MainColor_Detail} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Road_Ground_M_Mobp1_Road_A_0.geometry} material={materials.M_Mobp1_Road_A} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Road_Ground_M_Mobp1_Road_B_0.geometry} material={materials.M_Mobp1_Road_B} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Road_Ground_M_Mobp1_Water_0.geometry} material={materials.M_Mobp1_Water} scale={0.01} />
|
||||
<RigidBody type="fixed" colliders="trimesh" name="terrain">
|
||||
<mesh castShadow receiveShadow geometry={nodes.ShadowCollision_M_Cmn_ShadowCollision_0.geometry} material={materials.M_Cmn_ShadowCollision} scale={0.01} />
|
||||
</RigidBody>
|
||||
<mesh castShadow receiveShadow geometry={nodes.F_BlindBuilding_M_Mobp1_Textures01_0.geometry} material={materials.M_Mobp1_Textures01} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.Gmob_Paris_VR_M_Mobp1_VR_0.geometry} material={materials.M_Mobp1_VR} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Building_002_M_Mobp1_kanban_0.geometry} material={materials.M_Mobp1_kanban} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Building_002_M_Mobp1_gaisenmon_tex_0.geometry} material={materials.M_Mobp1_gaisenmon_tex} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.Rainbow_model_M_Mobp1_Rainbow_0.geometry} material={materials.M_Mobp1_Rainbow} position={[-0.16, 0.001, 0]} rotation={[0, -Math.PI / 2, 0]} scale={0.01} />
|
||||
<mesh castShadow receiveShadow geometry={nodes.N_Audience_NoMove_01_M_Cmn_AudienceModel_0.geometry} material={materials.M_Cmn_AudienceModel} scale={0.01} />
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
useGLTF.preload('./models/tour_paris_promenade-transformed.glb')
|
|
@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react-swc'
|
|||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
optimizeDeps: {
|
||||
exclude: ['js-big-decimal']
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue