Remove Stage property

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.vercel

package.json

@@ -6,21 +6,25 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "deploy": "vercel"
   },
   "dependencies": {
     "@react-three/drei": "^9.68.6",
     "@react-three/fiber": "^8.13.0",
+    "cors": "^2.8.5",
     "leva": "^0.9.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": "^0.146.0"
+    "three": "^0.146.0",
+    "vercel": "^30.2.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
     "http-proxy-middleware": "^2.0.6",
+    "r3f-perf": "^7.1.2",
     "uninstall": "^0.0.0",
     "vite": "^4.1.0"
   }

src/App.jsx

@@ -1,26 +1,31 @@
 import { Canvas } from "@react-three/fiber";
 import { Experience } from "./components/Experience";
-import { Stage, Grid, Environment, Backdrop } from '@react-three/drei'
+import { Stage, Grid, Environment, Backdrop, ContactShadows } from '@react-three/drei'
+import { Perf } from 'r3f-perf'
 
 
 function App() {
 // const { color } = useControls({ color: '#40006A' })
   return (
      <Canvas shadows camera={{ position: [0, 8, 30], scale: [0.8, 0.8, 0.8], fov: 30 }}>
+      <Perf />
       <color attach="background" args={["#40006A"]} />
+
       <ambientLight intensity={0.1} />
-      <directionalLight position={[-10, 0, -5]} intensity={1} color="red" />
-      <directionalLight position={[-1, -2, -5]} intensity={0.2} color="#0c8cbf" />
-      <spotLight position={[5, 0, 5]} intensity={2.5} penumbra={1} angle={0.35} castShadow color="#2b0080" />
+      {/* <directionalLight position={[-10, 0, -5]} intensity={1} color="red" /> */}
+      {/* <directionalLight position={[-1, -2, -5]} intensity={0.2} color="#0c8cbf" /> */}
+      {/* <spotLight position={[5, 0, 5]} intensity={2.5} penumbra={1} angle={0.35} castShadow color="#2b0080" /> */}
 
-      <Stage intensity={0.2} environment="sunset" shadows={{ type: 'contact', colorBlend: 5, opacity: 5 }} adjustCamera={false} background="#2b0080">
-        <Experience/>
-      </Stage>
+      {/* <Stage intensity={0.2} environment="sunset" shadows={{ type: 'contact', colorBlend: 5, opacity: 5 }} adjustCamera={false} background="#2b0080"> */}
+      <Experience/>
+      {/* </Stage> */}
       {/* <Backdrop receiveShadow scale={[70, 25, 15]} floor={3} position={[0, -5, -10]}>
         <meshPhysicalMaterial roughness={1} color="#40006A" />
       </Backdrop> */}
       <Grid renderOrder={-1} position={[0, -4.8, 0]} infiniteGrid cellSize={0.6} cellThickness={0.6} sectionSize={3.3} sectionThickness={1.5} sectionColor={[0.5, 0.5, 1]} fadeDistance={50} />
-      <Environment background preset="sunset" blur={0.8} />
+      <ContactShadows frames={2} position={[0, -4.9, 0]} scale={30} blur={2} opacity={0.6} />
+
+      <Environment shadows background preset="sunset" blur={0.8} />
     </Canvas>
   );
 }

vercel.json

@@ -0,0 +1,27 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "Access-Control-Allow-Origin",
+          "value": "*"
+        },
+        {
+          "key": "Access-Control-Allow-Methods",
+          "value": "GET, POST, PUT, DELETE, PATCH, OPTIONS"
+        },
+        {
+          "key": "Access-Control-Allow-Headers",
+          "value": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
+        }
+      ]
+    }
+  ]
+}