add vercelVite config for deployment usage

Author: ErdongChen-Andrew

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 dist
-.vscode
+.vscode
+exampleDist

src/CharacterModel.tsx renamed to example/CharacterModel.tsx

@@ -8,7 +8,7 @@ import {
 import { useControls } from "leva";
 import { Suspense, useEffect, useRef, useMemo, useState } from "react";
 import * as THREE from "three";
-import { useGame } from "./stores/useGame";
+import { useGame } from "../src/stores/useGame";
 import { BallCollider, RapierCollider } from "@react-three/rapier";
 import { useFrame } from "@react-three/fiber";
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";

src/Experience.tsx renamed to example/Experience.tsx

@@ -1,16 +1,16 @@
 import { Grid, KeyboardControls } from "@react-three/drei";
 import { Perf } from "r3f-perf";
 import { Physics } from "@react-three/rapier";
-import Ecctrl from "./Ecctrl";
-import Floor from "../example/Floor";
-import Lights from "../example/Lights";
-import Steps from "../example/Steps";
-import Slopes from "../example/Slopes";
-import RoughPlane from "../example/RoughPlane";
-import RigidObjects from "../example/RigidObjects";
-import FloatingPlatform from "../example/FloatingPlatform";
-import DynamicPlatforms from "../example/DynamicPlatforms";
-import ShotCube from "../example/ShotCube";
+import Ecctrl from "../src/Ecctrl";
+import Floor from "./Floor";
+import Lights from "./Lights";
+import Steps from "./Steps";
+import Slopes from "./Slopes";
+import RoughPlane from "./RoughPlane";
+import RigidObjects from "./RigidObjects";
+import FloatingPlatform from "./FloatingPlatform";
+import DynamicPlatforms from "./DynamicPlatforms";
+import ShotCube from "./ShotCube";
 import { useControls } from "leva";
 import CharacterModel from "./CharacterModel";
 

src/index.html renamed to example/index.html

@@ -1,7 +1,7 @@
 import "./style.css";
 import ReactDOM from "react-dom/client";
 import { Canvas } from "@react-three/fiber";
-import Experience from "./Experience";
+import Experience from "../example/Experience";
 import { Leva } from "leva";
 
 const root = ReactDOM.createRoot(document.querySelector("#root"));

src/index.tsx renamed to example/index.tsx

@@ -0,0 +1,20 @@
+import react from "@vitejs/plugin-react";
+
+const isCodeSandbox =
+  "SANDBOX_URL" in process.env || "CODESANDBOX_HOST" in process.env;
+
+export default {
+  plugins: [react()],
+  root: "example/",
+  publicDir: "../public/",
+  base: "./",
+  server: {
+    host: true,
+    open: !isCodeSandbox, // Open if it's not a CodeSandbox
+  },
+  build: {
+    outDir: "./exampleDist",
+    emptyOutDir: true,
+    sourcemap: true,
+  },
+};

src/style.css renamed to example/style.css

@@ -6,7 +6,7 @@ const isCodeSandbox = 'SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in proc
 
 const dev = defineConfig({
   plugins: [react()],
-  root: 'src/',
+  root: 'example/',
   publicDir: "../public/",
   base: './',
   server: {