Merge branch 'main' of github.com:mariussd/sandbox

.github/workflows/deploy.yml

@@ -17,50 +17,9 @@ permissions:
 
 jobs:
 
-  typecheck:
-    name: ʦ TypeScript
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: 🔎 Type check
-        run: npm run typecheck --if-present
-
-  vitest:
-    name: ⚡ Vitest
-    runs-on: ubuntu-latest
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          cache: npm
-          cache-dependency-path: ./package.json
-          node-version: 18
-
-      - name: 📥 Install deps
-        run: npm install
-
-      - name: ⚡ Run vitest
-        run: npm run test -- --coverage
-
   deploy:
     name: 🚀 Deploy
     runs-on: ubuntu-latest
-    needs: [typecheck, vitest]
     # only deploy main/dev branch on pushes
     if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
 

app/routes/three.scroll/route.tsx

@@ -0,0 +1,56 @@
+import { Canvas, type MeshProps, useFrame } from "@react-three/fiber";
+import { Float, ScrollControls, useScroll, Scroll } from "@react-three/drei";
+import { useRef } from "react";
+import { type LinksFunction } from "@remix-run/node";
+import styles from "~/routes/three.scroll/styles/styles.css";
+
+export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
+
+const ScrollTest = () => {
+  return (
+    <Canvas
+      camera={{
+        fov: 45,
+        near: 0.1,
+        far: 200,
+        position: [-6, 3, 6],
+      }}
+    >
+      <directionalLight position={[1, 3, 2]} intensity={1.5} />
+      <ambientLight intensity={0.5} />
+      <ScrollControls damping={0.01} pages={5}>
+        <Cube />
+        {/*        <Scroll>
+          <Cube></Cube>
+        </Scroll>*/}
+      </ScrollControls>
+    </Canvas>
+  );
+};
+
+const Cube = () => {
+  const ref = useRef<MeshProps>();
+  const scroll = useScroll();
+
+  const oldOffset = useRef(0);
+
+  useFrame((state, delta) => {
+    const scrollDirection = oldOffset.current - scroll.offset > 0 ? 1 : -1;
+
+    ref.current.rotation.y += scroll.delta * 1.3 * scrollDirection;
+    ref.current.rotation.z -= scroll.delta * 0.2 * -scrollDirection;
+
+    oldOffset.current = scroll.offset;
+  });
+
+  return (
+    <Float>
+      <mesh ref={ref} scale={1.5}>
+        <boxGeometry />
+        <meshStandardMaterial color="mediumpurple" />
+      </mesh>
+    </Float>
+  );
+};
+
+export default ScrollTest;

app/routes/three.scroll/styles/styles.css

@@ -0,0 +1,3 @@
+body {
+    background: #faf0e5;
+}

app/routes/three/_index.tsx

@@ -0,0 +1,17 @@
+import { Canvas } from "@react-three/fiber";
+import Experience from "./Experience.jsx";
+
+const ThreeIndex = () => (
+  <Canvas
+    camera={{
+      fov: 45,
+      near: 0.1,
+      far: 200,
+      position: [-4, 3, 6],
+    }}
+  >
+    <Experience />
+  </Canvas>
+);
+
+export default ThreeIndex;

app/routes/three/styles/style.css

@@ -7,4 +7,4 @@
     overflow: hidden;
     border-radius: 30px;
     user-select: none;
-}
+}

package.json

@@ -36,7 +36,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tiny-invariant": "^1.3.1",
-    "@react-three/drei": "9.77",
+    "@react-three/drei": "9.88.5",
     "@react-three/fiber": "^8.13.0",
     "three": "^0.153.0"
   },