diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 9e8587b..219669f 100644 --- a/.github/workflows/deploy.yml +++ b/.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' }} diff --git a/app/routes/three.scroll/route.tsx b/app/routes/three.scroll/route.tsx new file mode 100644 index 0000000..f51824a --- /dev/null +++ b/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 ( + + + + + + {/* + + */} + + + ); +}; + +const Cube = () => { + const ref = useRef(); + 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 ( + + + + + + + ); +}; + +export default ScrollTest; diff --git a/app/routes/three.scroll/styles/styles.css b/app/routes/three.scroll/styles/styles.css new file mode 100644 index 0000000..4aa4eb0 --- /dev/null +++ b/app/routes/three.scroll/styles/styles.css @@ -0,0 +1,3 @@ +body { + background: #faf0e5; +} \ No newline at end of file diff --git a/app/routes/three/_index.tsx b/app/routes/three/_index.tsx new file mode 100644 index 0000000..b1e2c9e --- /dev/null +++ b/app/routes/three/_index.tsx @@ -0,0 +1,17 @@ +import { Canvas } from "@react-three/fiber"; +import Experience from "./Experience.jsx"; + +const ThreeIndex = () => ( + + + +); + +export default ThreeIndex; diff --git a/app/routes/three/index.tsx b/app/routes/three/index.tsx deleted file mode 100644 index 4b69af1..0000000 --- a/app/routes/three/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import {Canvas} from '@react-three/fiber' -import Experience from './Experience.jsx' - - -const ThreeIndex = () => ( - -); - -export default ThreeIndex; - diff --git a/app/routes/three/styles/style.css b/app/routes/three/styles/style.css index c773720..a683d8d 100644 --- a/app/routes/three/styles/style.css +++ b/app/routes/three/styles/style.css @@ -7,4 +7,4 @@ overflow: hidden; border-radius: 30px; user-select: none; -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index d68b0c3..a1abcde 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "name": "dynamic-routing-b924", "dependencies": { "@prisma/client": "^4.16.2", - "@react-three/drei": "9.77", + "@react-three/drei": "9.88.5", "@react-three/fiber": "^8.13.0", "@remix-run/css-bundle": "^2.0.1", "@remix-run/node": "^2.0.1", @@ -1767,9 +1767,9 @@ } }, "node_modules/@mediapipe/tasks-vision": { - "version": "0.10.2-rc2", - "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.2-rc2.tgz", - "integrity": "sha512-b9ar6TEUo8I07n/jXSuKDu5HgzkDah9pe4H8BYpcubhCEahlfDD5ixE+9SQyJM4HXHXdF9nN/wRQT7rEnLz7Gg==" + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.2.tgz", + "integrity": "sha512-d8Q9uRK89ZRWmED2JLI9/blpJcfdbh0iEUuMo8TgkMzNfQBY1/GC0FEJWrairTwHkxIf6Oud1vFBP+aHicWqJA==" }, "node_modules/@mswjs/cookies": { "version": "0.2.2", @@ -2043,30 +2043,33 @@ "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==" }, "node_modules/@react-three/drei": { - "version": "9.77.11", - "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.77.11.tgz", - "integrity": "sha512-6jfvLK5EK3PkqdhuhGUUg9sgC6ByBkmwxqy4H0bBtpD+/idCQb+JE09VBgY+1oy2flT15iS2KD/E1+cs/aoiXg==", + "version": "9.88.5", + "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-9.88.5.tgz", + "integrity": "sha512-UAiXrnIR/FVoWImg7BMgsmGGOQUxxsNeKbcekq8guHtpOiyZjCPMqSPrzvDc7qsXzWEvLwC25wawMJLuR/c7dg==", "dependencies": { "@babel/runtime": "^7.11.2", - "@mediapipe/tasks-vision": "0.10.2-rc2", + "@mediapipe/tasks-vision": "0.10.2", "@react-spring/three": "~9.6.1", "@use-gesture/react": "^10.2.24", "camera-controls": "^2.4.2", + "cross-env": "^7.0.3", "detect-gpu": "^5.0.28", "glsl-noise": "^0.0.0", "lodash.clamp": "^4.0.3", "lodash.omit": "^4.5.0", "lodash.pick": "^4.4.0", - "maath": "^0.6.0", + "maath": "^0.9.0", "meshline": "^3.1.6", "react-composer": "^5.0.3", "react-merge-refs": "^1.1.0", + "stats-gl": "^1.0.4", "stats.js": "^0.17.0", "suspend-react": "^0.1.3", - "three-mesh-bvh": "^0.6.0", - "three-stdlib": "^2.23.9", + "three-mesh-bvh": "^0.6.7", + "three-stdlib": "^2.28.0", "troika-three-text": "^0.47.2", "utility-types": "^3.10.0", + "uuid": "^9.0.1", "zustand": "^3.5.13" }, "peerDependencies": { @@ -2081,6 +2084,18 @@ } } }, + "node_modules/@react-three/drei/node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@react-three/fiber": { "version": "8.15.3", "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.15.3.tgz", @@ -4824,7 +4839,6 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", - "dev": true, "dependencies": { "cross-spawn": "^7.0.1" }, @@ -4842,7 +4856,6 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -4856,7 +4869,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -8440,8 +8452,7 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", - "dev": true + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, "node_modules/isstream": { "version": "0.1.2", @@ -9240,9 +9251,9 @@ } }, "node_modules/maath": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz", - "integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/maath/-/maath-0.9.0.tgz", + "integrity": "sha512-aAR8hoUqPxlsU8VOxkS9y37jhUzdUxM017NpCuxFU1Gk+nMaZASZxymZrV8LRSHzRk/watlbfyNKu6XPUhCFrQ==", "peerDependencies": { "@types/three": ">=0.144.0", "three": ">=0.144.0" @@ -11604,7 +11615,6 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, "engines": { "node": ">=8" } @@ -13248,7 +13258,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, "dependencies": { "shebang-regex": "^3.0.0" }, @@ -13260,7 +13269,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, "engines": { "node": ">=8" } @@ -13498,6 +13506,11 @@ "node": ">=16" } }, + "node_modules/stats-gl": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-1.0.5.tgz", + "integrity": "sha512-XimMxvwnf1Qf5KwebhcoA34kcX+fWEkIl0QjNkCbu4IpoyDMMsOajExn7FIq5w569k45+LhmsuRlGSrsvmGdNw==" + }, "node_modules/stats.js": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz", diff --git a/package.json b/package.json index c32adf4..a646f4e 100644 --- a/package.json +++ b/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" },