ADDED README AND LICENSE

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2022] [Ron Waller]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,77 @@
+# Mario Kart 3.js - JavaScript/WebGL Mario Kart
+[Link](https://mario-kart-3-js.vercel.app/)
+
+DISCLAIMER : This is not a completed project, I would say around 50% of the work has been done up to now. It takes a lot of time so please enjoy.
+
+## How to install
+
+Clone the repository or download it
+
+Open your terminal and inside the project folder, run :
+
+```bash
+  npm install
+```
+
+Start the dev server
+
+```bash
+  npm run dev
+```
+
+## How to use (Gameplay)
+
+- Use the W key to accelerate, the mouse to steer for now (will be updated for mobile/gamepad/keyboard).
+
+- Steer with the mouse.
+
+- Press and hold the space bar to initiate a drift. Steer and counter steer to maintain the drift. release it to get a mini - turbo.
+
+- Press E key to use the current item.
+
+- Press R to reset your position, usable anytime.
+
+## How to use (Code)
+
+- Anything needs update.
+
+- You can also edit the README to add elements to the To-do List.
+
+- Feel free to bring your ideas to the project even if you can't code them.
+
+## TO - DO
+
+- Design Landing page
+
+- Add items
+
+- Add texture to the flame shaders
+
+- Add curve/length modifiers to drift particles 3/4
+
+- Add Skid marks 
+
+- Add smokes
+
+- Add wind screen effect when boosting
+
+- Improve sound design quality
+
+- Design UI for HUD
+
+- Make Time Trial mode
+
+- Design tracks and checkpoints
+
+- Improve code quality
+
+- Items
+  - Tennis ball
+  - Bomb
+  - Real red shell
+  - Treats
+  - ?
+
+## License
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

mario_kart.tsx

@@ -1,46 +0,0 @@
-/*
-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')

src/components/Experience.jsx

@@ -17,6 +17,7 @@ import {
   SMAA,
   ChromaticAberration,
   Vignette,
+  LUT,
 } from "@react-three/postprocessing";
 import { Banana } from "./models/items/Banana_peel_mario_kart";
 import { ItemBox } from "./models/misc/Gift";
@@ -34,7 +35,8 @@ import {
 } from "playroomkit";
 import { PlayerDummies } from "./PlayerDummies";
 import { useEffect, useState } from "react";
-import { useFrame } from "@react-three/fiber";
+import { useFrame, useLoader } from "@react-three/fiber";
+import { LUTPass, LUTCubeLoader } from 'three-stdlib'
 
 export const Experience = () => {
   const onCollide = (event) => {
@@ -58,6 +60,8 @@ export const Experience = () => {
   //   setNetworkShells(shells);
   // }, [shells]);
 
+  const {texture}= useLoader(LUTCubeLoader, "./cubicle-99.CUBE");
+
   return (
     <>
       {players.map((player) => (
@@ -111,7 +115,7 @@ export const Experience = () => {
         />
       ))}
 
-      <directionalLight
+      {/* <directionalLight
         position={[10, 50, -30]}
         intensity={1}
         shadow-bias={-0.0001}
@@ -121,7 +125,7 @@ export const Experience = () => {
         shadow-camera-top={300}
         shadow-camera-bottom={-300}
         castShadow
-      />
+      /> */}
 
       <EffectComposer
         multisampling={0}
@@ -137,11 +141,10 @@ export const Experience = () => {
           luminanceSmoothing={0.01}
           intensity={0.5}
         />
-
         <TiltShift2 />
-        <ChromaticAberration offset={[0.0006, 0.0006]} />
+        {/* <ChromaticAberration offset={[0.0006, 0.0006]} /> */}
-        <HueSaturation saturation={0.1} />
+        <HueSaturation saturation={0.05} />
-        <Vignette eskil={false} offset={0.1} darkness={0.4} />
+        {/* <Vignette eskil={false} offset={0.1} darkness={0.4} /> */}
       </EffectComposer>
     </>
   );