Skip to content

Commit 880a934

Browse files
longtv2222longtv2222
authored
feat: new cars and minor UI fix (#633)
* fix: only show control when done loading * fix: use visible to avoid remounting model (which can be quite expensive)! * fix: add maserati mc 20 and rename current car
1 parent 3bba123 commit 880a934

File tree

7 files changed

+1115
-19
lines changed

7 files changed

+1115
-19
lines changed

‎prototype/index.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@
1313
type="image/png"
1414
href="/icon.png">
1515
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
16-
<!--
17-
manifest.json provides metadata used when your web app is installed on a
18-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
19-
-->
20-
<link rel="manifest" href="/manifest.json" />
2116
<title>Car Viewer</title>
2217
</head>
2318
<body>

‎prototype/public/maserati_mc20.glb‎

10.7 MB
Binary file not shown.

‎prototype/src/App.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,41 @@
11
import { Canvas } from '@react-three/fiber'
2-
import { Environment, Loader, OrbitControls, Stats } from "@react-three/drei"
2+
import { Environment, Loader, OrbitControls, Stats, useProgress } from "@react-three/drei"
33
import Lamborghini from "./components/Models/Lamborghini"
4-
import Scene from "./components/Models/Scene"
5-
import { useControls } from 'leva'
4+
import Scene from "./components/Models/Autobianchi Stellina"
5+
import Maserati from "./components/Models/Maserati_mc20"
6+
import { Leva, useControls } from 'leva'
67
import { Suspense } from 'react'
78

89
export default function App() {
9-
const { Interior, Exterior, rotation, hideStats, select } = useControls({
10-
select: { options: ['Lamborghini', 'Scene'] },
10+
const { Interior, Exterior, Rotation, Select, Stats: stats } = useControls({
11+
Select: { options: ['Lamborghini Aventador J', 'Autobianchi Stellina', "Maserati MC20"] },
1112
Interior: '#aa5252',
1213
Exterior: '#9a9898',
13-
rotation: false,
14-
hideStats: false,
14+
Rotation: false,
15+
Stats: true,
1516
});
17+
const { progress } = useProgress()
1618

1719
return (
1820
<>
1921
<Canvas camera={{ position: [0, 0, 10] }} shadows={true} frameloop="demand">
2022
<Suspense fallback={null}>
21-
{select === "Lamborghini" && <Lamborghini interior={Interior} exterior={Exterior} />}
22-
{select === "Scene" && <Scene interior={Interior} exterior={Exterior} />}
23+
<Lamborghini interior={Interior} exterior={Exterior} visible={Select === "Lamborghini Aventador J"} />
24+
<Scene interior={Interior} exterior={Exterior} visible={Select === "Autobianchi Stellina"} />
25+
<Maserati interior={Interior} exterior={Exterior} visible={Select === "Maserati MC20"} />
2326
</Suspense>
2427
<Environment
2528
background
2629
files={'venice_sunset_1k.hdr'}
2730
blur={0.5}
2831
/>
29-
{!hideStats ? <Stats /> : undefined}
30-
<OrbitControls maxPolarAngle={7 * Math.PI / 18} maxDistance={20} autoRotate={rotation} />
32+
{stats ? <Stats /> : undefined}
33+
<OrbitControls maxPolarAngle={7 * Math.PI / 18} maxDistance={20} autoRotate={Rotation} />
3134
</Canvas>
3235
<Loader />
36+
<Leva
37+
hidden={progress === 100 ? false : true}
38+
/>
3339
</>
3440
)
3541
}

‎prototype/src/components/Models/Scene.tsx‎ renamed to ‎prototype/src/components/Models/Autobianchi Stellina.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ export default function Car(props: Model) {
190190
const { nodes, materials } = useGLTF('/scene.gltf') as GLTFResult
191191

192192
return (
193-
<group name="Scene" rotation={[0, 3.14, 0]} {...props} dispose={null}>
193+
<group name="Scene" rotation={[0, 3.14, 0]} {...props} dispose={null} >
194194
<group position={[0, 0.71, 0]}>
195195
<group position={[0, 0.4, 0]} scale={[0.02, 0.02, 0.02]}>
196196
<group position={[0, -17.5222, 177.4529]} rotation={[-Math.PI, 0, -Math.PI]}>

‎prototype/src/components/Models/Lamborghini.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function Lamborghini(props: Model) {
7676
const { nodes } = useGLTF('/lamborghini.glb') as GLTFResult;
7777

7878
return (
79-
<group name={'Lamborghini'} scale={[0.007, 0.007, 0.007]} position={[0, 0.95, 0]} dispose={null} >
79+
<group name={'Lamborghini'} scale={[0.010, 0.010, 0.010]} position={[0, 0.95, 0]} dispose={null} {...props}>
8080
<group rotation={[-Math.PI / 2, 0, 0]}>
8181
<group rotation={[Math.PI / 2, 0, 0]}>
8282
<group position={[0.1075, -3.3812, -26.1716]} rotation={[0, 0, 0]} scale={[73.6118, 73.6118, 73.6118]}>

0 commit comments

Comments
 (0)