Merge pull request #1 from sensebox/feat/router

feat: add router

LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2024 senseBox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,50 +1,23 @@
-# React + TypeScript + Vite
+# senseBox:3D
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+senseBox:3D is a website that renders senseBox 3D models using React Three Fiber.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+To install the dependencies, run:
 
-## Expanding the ESLint configuration
+```bash
+npm install
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Usage
 
-- Configure the top-level `parserOptions` property like this:
+To start the development server, run:
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```bash
+npm run dev
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+## License
+
+This project is licensed under the [MIT License](./LICENSE.md).

package.json

@@ -15,6 +15,7 @@
     "lamina": "^1.1.23",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
     "three": "^0.169.0",
     "three-stdlib": "^2.33.0"
   },

src/main.tsx

@@ -1,10 +1,27 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.tsx'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import BikeScene from './scenes/bike/bike-scene';
+
+const router = createBrowserRouter([
+  {
+    path: "bike",
+    element: (
+      <StrictMode>
+        <BikeScene />
+      </StrictMode>
+    ),
+  },
+  {
+    path: "/",
+    element: <div>
+      <h1>senseBox 3D models</h1>
+      <a href="/bike">Bike</a>
+    </div>,
+  },
+]);
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <RouterProvider router={router} />
 )

src/App.tsx → src/scenes/bike/bike-scene.tsx

@@ -2,10 +2,9 @@
 import { Suspense, useRef } from 'react'
 import { Canvas } from '@react-three/fiber'
 import { OrbitControls, Stage } from '@react-three/drei'
-import { Model } from './Model'
+import { Model } from './model'
 
-
-export default function App() {
+export default function BikeScene() {
   const ref = useRef(null)
   return (
     <Canvas ref={ref} shadows dpr={[1, 2]} camera={{

src/Model.tsx → src/scenes/bike/model.tsx

@@ -3,7 +3,7 @@ Auto-generated by: https://github.com/pmndrs/gltfjsx
 */
 
 import * as THREE from 'three'
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useGLTF, useAnimations } from '@react-three/drei'
 import { GLTF } from 'three-stdlib'
 
@@ -1227,7 +1227,7 @@ type GLTFResult = GLTF & {
 
 export function Model(props: JSX.IntrinsicElements['group']) {
   const group = useRef<THREE.Group>(null)
-  const { nodes, materials, animations } = useGLTF('/senseBox_bike.gltf') as GLTFResult
+  const { nodes, materials, animations } = useGLTF('/gltf/bike/senseBox_bike.gltf') as GLTFResult
   const { actions } = useAnimations(animations, group)
 
   useEffect(() => {
@@ -7241,4 +7241,4 @@ export function Model(props: JSX.IntrinsicElements['group']) {
   )
 }
 
-useGLTF.preload('/senseBox_bike.gltf')
+useGLTF.preload('/gltf/bike/senseBox_bike.gltf')