Feature/12 scene loading

app/components/CanvasLayer.tsx

@@ -5,6 +5,7 @@ import {
     StatsGl
 } from '@react-three/drei';
 import { FirstPersonControls } from './FirstPersonControls.tsx'
+import { useFetcher, useLoaderData } from "@remix-run/react";
 
 import { Splat } from './Splat.tsx';
 import { Leva, useControls } from 'leva';
@@ -13,9 +14,21 @@ import { useMemo } from 'react'
 const CanvasLayer = () => {
 
   const [splatExists, setSplatExists] = useState(false);
+  const [splatUrls, setSplatUrls] = useState<string[]>([]);
+  const [selectedSplat, setSelectedSplat] = useState<string>('');
   const [isPointerLocked, setIsPointerLocked] = useState(true);
-  const handleOverlayEnter = () => setIsPointerLocked(false);
-  const handleOverlayLeave = () => setIsPointerLocked(true);
+
+
+  // fetch list of files from backend & filter them
+  useEffect(() => {
+    fetch('/files')
+      .then(response => response.json())
+      .then(data => setSplatUrls(data.filter(file => file.endsWith('.splat'))))
+      .catch(error => console.error('Error fetching files:', error));
+  }, []);
+
+  // temp debug: just shows the files
+  console.log(splatUrls);
 
   useEffect(() => {
     const checkFileExists = async () => {
@@ -34,6 +47,12 @@ const CanvasLayer = () => {
     checkFileExists();
   }, []);
 
+  const handleSplatChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedSplat(event.target.value);
+  };
+
+  const handleOverlayEnter = () => setIsPointerLocked(false);
+  const handleOverlayLeave = () => setIsPointerLocked(true);
 
   const options = useMemo(() => {
     return {
@@ -47,20 +66,26 @@ const CanvasLayer = () => {
   return (
     <div className="absolute w-full h-full">
       <div onMouseEnter={handleOverlayEnter} onMouseLeave={handleOverlayLeave}>
-        <Leva oneLineLabels />
+        <select
+          value={selectedSplat}
+          onChange={handleSplatChange}
+          style={{margin:'0px 300px', position: 'absolute', zIndex: 10}}>
+            <option value="">Select Splat</option>
+            {splatUrls.map((url, index) => (
+              <option key={index} value={url}>
+                {url}
+              </option>
+            ))}
+          </select>
+          <Leva oneLineLabels />
       </div>
       <Canvas>
         <StatsGl />
         <ambientLight />
         <pointLight position={[0, 0, 0]} />
         <FirstPersonControls speed={splatOptions.speed} />
         {isPointerLocked && <PointerLockControls />}
-        {splatExists &&
-        <Splat  position={[0, 2, 1]} src="splat.splat" /> }
-        {!splatExists &&
-        <Splat
-        position={[0, 2, 1]}
-        src="https://huggingface.co/cakewalk/splat-data/resolve/main/nike.splat" />}
+        <Splat position={[0, 2, 1]} src={selectedSplat || "https://huggingface.co/cakewalk/splat-data/resolve/main/nike.splat"} />
       </Canvas>
     </div>
   );

app/routes/files.tsx

@@ -0,0 +1,15 @@
+import { LoaderFunction } from '@remix-run/node';
+import fs from 'fs';
+import path from 'path';
+
+export const loader: LoaderFunction = async () => {
+  // set dir as /public folder
+  const publicDir = path.join(process.cwd(), 'public');
+  // get all files in dir
+  const files = fs.readdirSync(publicDir);
+  return new Response(JSON.stringify(files), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};