fix: UX improvement (#634)

* chore: add reset color button

* fix: use default color for each car when select a new car

* fix: compilation error

* fix: each car now has its own state

* fix: linting issues

* fix: rename files + cleaner code

* fix: react key

* fix: limit min and max distance

Author: longtv2222

prototype/src/App.tsx

@@ -1,38 +1,110 @@
 import { Canvas } from '@react-three/fiber'
 import { Environment, Loader, OrbitControls, Stats, useProgress } from "@react-three/drei"
-import Lamborghini from "./components/Models/Lamborghini"
+import Lamborghini from "./components/Models/Lamborghini Aventador J"
 import Scene from "./components/Models/Autobianchi Stellina"
-import Maserati from "./components/Models/Maserati_mc20"
-import { Leva, useControls } from 'leva'
-import { Suspense } from 'react'
+import Maserati from "./components/Models/Maserati MC20"
+import { Leva, levaStore, useControls, button } from 'leva'
+import { Suspense, useEffect, useRef, useState } from 'react'
+import { Model, ModelProps, models } from './components/Models/model'
+
+interface Cars {
+  readonly Model:(props: ModelProps) => JSX.Element;
+  readonly interior: string;
+  readonly exterior: string;
+}
 
 export default function App() {
-  const carNameComponentMap = {
-    "Lamborghini Aventador J": Lamborghini,
-    "Maserati MC20": Maserati,
-    "Autobianchi Stellina": Scene
+  const cars: Record<Model, Cars> = {
+    "Lamborghini Aventador J": {
+      Model: Lamborghini,
+      interior: "#000000",
+      exterior: "#9a9898",
+    },
+    "Maserati MC20": {
+      Model: Maserati,
+      interior: "#000000",
+      exterior: "#ffffff"
+    },
+    "Autobianchi Stellina": {
+      Model: Scene,
+      interior: "#000000",
+      exterior: "#963f3f"
+    },
+  };
+
+  const [carsState, setCarsState] = useState(() => cars);
+  const carsStateRef = useRef(carsState);
+
+  useEffect(() => {
+    carsStateRef.current = carsState;
+  }, [carsState]);
+
+  const resetCarColor = () => {
+    const model = levaStore.get("Select") as Model;
+    set({
+      Exterior: cars[model].exterior,
+      Interior: cars[model].interior,
+    });
+  };
+
+  const setCarInterior = (interior: string) => {
+    const model = levaStore.get("Select") as Model;8
+    setCarsState({
+      ...carsStateRef.current,
+      [model]: {
+        ...carsStateRef.current[model],
+        interior
+      }
+    })
   };
 
-  const { Interior, Exterior, Rotation, Select, Stats: stats } = useControls({
-    Select: { options: Object.keys(carNameComponentMap) },
-    Interior: '#000000',
-    Exterior: '#9a9898',
+  const setCarExterior = (exterior: string) => {
+    const model = levaStore.get("Select") as Model;
+    setCarsState({
+      ...carsStateRef.current,
+      [model]: {
+        ...carsStateRef.current[model],
+        exterior
+      }
+    })
+  };
+  
+  const [{ Rotation, Stats: stats }, set] = useControls(() => ({
+    Select: {
+      options: models,
+      onChange: (value: Model) => {
+        set({
+          Exterior: carsStateRef.current[value].exterior,
+          Interior: carsStateRef.current[value].interior,
+        });
+      }
+    },
+    Interior: {
+      value: '#000000',
+      onChange: setCarInterior
+    },
+    Exterior: {
+      value: '#9a9898',
+      onChange: setCarExterior
+    },
     Rotation: false,
     Stats: true,
-  });
+    "Reset color": button(resetCarColor),
+  }));
 
-  const { progress } = useProgress()
+  const { progress } = useProgress();
 
   return (
     <>
       <Canvas camera={{ position: [0, 0, 10] }} shadows={true} frameloop="demand">
         <Suspense fallback={null}>
-          {Object.entries(carNameComponentMap)
-            .map(([name, CarModel]) => (
-              CarModel({
-                exterior: Exterior,
-                interior: Interior,
-                visible: Select === name,
+          {models
+            .map(name => (
+              cars[name].Model({
+                exterior: carsState[name].exterior,
+                interior: carsState[name].interior,
+                visible: levaStore.get("Select") === name,
+                key: name
               })
             ))}
         </Suspense>
@@ -42,7 +114,7 @@ export default function App() {
           blur={0.5}
         />
         {stats ? <Stats /> : undefined}
-        <OrbitControls maxPolarAngle={7 * Math.PI / 18} maxDistance={20} autoRotate={Rotation} />
+        <OrbitControls maxPolarAngle={7 * Math.PI / 18} autoRotate={Rotation} minDistance={2} maxDistance={15} />
       </Canvas>
       <Loader />
       <Leva

prototype/src/components/Models/Autobianchi Stellina.tsx

@@ -5,7 +5,7 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 import * as THREE from 'three'
 import { useGLTF } from '@react-three/drei'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Model } from "./model"
+import { ModelProps } from "./model"
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -186,7 +186,7 @@ type GLTFResult = GLTF & {
   }
 }
 
-export default function Car(props: Model) {
+export default function Car(props: ModelProps) {
   const { nodes, materials } = useGLTF('/scene.gltf') as GLTFResult
 
   return (

prototype/src/components/Models/Lamborghini.tsx renamed to prototype/src/components/Models/Lamborghini Aventador J.tsx

@@ -4,7 +4,7 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 import * as THREE from 'three'
 import { useGLTF } from '@react-three/drei'
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
-import { Model } from './model'
+import { ModelProps } from './model'
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -72,7 +72,7 @@ type GLTFResult = GLTF & {
   materials: object
 }
 
-export default function Lamborghini(props: Model) {
+export default function Lamborghini(props: ModelProps) {
   const { nodes } = useGLTF('/lamborghini.glb') as GLTFResult;
 
   return (

prototype/src/components/Models/Maserati_mc20.tsx renamed to prototype/src/components/Models/Maserati MC20.tsx

@@ -9,7 +9,7 @@ Title: Maserati MC20
 import * as THREE from 'three'
 import { useGLTF } from '@react-three/drei'
 import { GLTF } from 'three-stdlib'
-import { Model } from './model'
+import { ModelProps } from './model'
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -561,7 +561,7 @@ type GLTFResult = GLTF & {
   }
 }
 
-export default function Car(props: Model) {
+export default function Car(props: ModelProps) {
   const { nodes, materials } = useGLTF('/maserati_mc20.glb') as GLTFResult
   return (
     <group {...props} dispose={null} position={[-2.2, -1, 4]} scale={[2, 2, 2]}>

prototype/src/components/Models/model.ts

@@ -1,4 +1,4 @@
-export interface Model {
+export interface ModelProps {
     /**
      * Set color of the model
      */
@@ -11,4 +11,12 @@ export interface Model {
      * To show or hide model
      */
     readonly visible: boolean
-}
+    /**
+     * Key of the component
+     */
+    readonly key: string
+}
+
+
+export const models = ["Lamborghini Aventador J", "Maserati MC20", "Autobianchi Stellina"] as const;
+export type Model = typeof models[number];