diff --git a/package.json b/package.json index 68b3522d..6928686b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "dependencies": { "@babel/types": "^7.21.0", - "@react-three/drei": "^9.53.3", + "@react-three/drei": "^9.56.25", "@react-three/fiber": "^8.11.2", "@reduxjs/toolkit": "^1.9.3", "@tailwindcss/line-clamp": "^0.4.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10921d21..35be1edb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,7 +5,7 @@ specifiers: '@cypress/code-coverage': ^3.10.0 '@netlify/plugin-lighthouse': ^4.0.7 '@netlify/plugin-nextjs': ^4.30.4 - '@react-three/drei': ^9.53.3 + '@react-three/drei': ^9.56.25 '@react-three/fiber': ^8.11.2 '@reduxjs/toolkit': ^1.9.3 '@tailwindcss/line-clamp': ^0.4.2 @@ -36,7 +36,7 @@ specifiers: dependencies: '@babel/types': 7.21.0 - '@react-three/drei': 9.53.3_ceh54bdkswdljeyl3jd54pj65e + '@react-three/drei': 9.56.25_ceh54bdkswdljeyl3jd54pj65e '@react-three/fiber': 8.11.2_xor7byvqlg4baqj6ymfbcmaax4 '@reduxjs/toolkit': 1.9.3_k4ae6lp43ej6mezo3ztvx6pykq '@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.7 @@ -2147,8 +2147,8 @@ packages: resolution: {integrity: sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg==} dev: false - /@react-three/drei/9.53.3_ceh54bdkswdljeyl3jd54pj65e: - resolution: {integrity: sha512-CjzyoLwAU291PO0AzHqz8ccNjV7EbNN6uK4fToGs1Lmtdvt4tng+EDpDD8LpNMvkC1AG0n8RnIerpfMTxfv5BQ==} + /@react-three/drei/9.56.25_ceh54bdkswdljeyl3jd54pj65e: + resolution: {integrity: sha512-Wlsmp8q1yqpsHgbUbnt+R83esU4rAE21k4xmcGXaJwNx4PJHR8VZY2kpnEt6TE2uo3L2blUFU0yBMi5/mCyhyw==} peerDependencies: '@react-three/fiber': '>=8.0' react: '>=18.0' @@ -2161,13 +2161,14 @@ packages: '@babel/runtime': 7.20.7 '@react-spring/three': 9.5.5_mwnnnbckvcqi26tj6me4jgcpge '@react-three/fiber': 8.11.2_xor7byvqlg4baqj6ymfbcmaax4 - '@use-gesture/react': 10.2.22_react@18.2.0 - detect-gpu: 5.0.6 + '@use-gesture/react': 10.2.24_react@18.2.0 + camera-controls: 2.3.1_three@0.149.0 + detect-gpu: 5.0.12 glsl-noise: 0.0.0 lodash.clamp: 4.0.3 lodash.omit: 4.5.0 lodash.pick: 4.4.0 - maath: 0.5.1_arp7zvamcwb6gpsp77lqxsjc74 + maath: 0.5.2_arp7zvamcwb6gpsp77lqxsjc74 meshline: 3.1.6_three@0.149.0 react: 18.2.0 react-composer: 5.0.3_react@18.2.0 @@ -2176,8 +2177,8 @@ packages: stats.js: 0.17.0 suspend-react: 0.0.8_react@18.2.0 three: 0.149.0 - three-mesh-bvh: 0.5.21_three@0.149.0 - three-stdlib: 2.20.4_three@0.149.0 + three-mesh-bvh: 0.5.23_three@0.149.0 + three-stdlib: 2.21.8_three@0.149.0 troika-three-text: 0.47.1_three@0.149.0 utility-types: 3.10.0 zustand: 3.7.2_react@18.2.0 @@ -2683,16 +2684,16 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@use-gesture/core/10.2.22: - resolution: {integrity: sha512-Ek0JZFYfk+hicLmoG094gm3YOuDMBNckHb988e59YOZoAkETT8dQSzT+g3QkSHSiP1m5wFXAGPSgxvOuwvGKHQ==} + /@use-gesture/core/10.2.24: + resolution: {integrity: sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q==} dev: false - /@use-gesture/react/10.2.22_react@18.2.0: - resolution: {integrity: sha512-ECo7ig16SxBE06ENIURO1woKEB6TC8qY3a0rugJjQ2f1o0Tj28xS/eYNyJuqzQB5YT0q5IrF7ZFpbx1p/5ohYA==} + /@use-gesture/react/10.2.24_react@18.2.0: + resolution: {integrity: sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg==} peerDependencies: react: '>= 16.8.0' dependencies: - '@use-gesture/core': 10.2.22 + '@use-gesture/core': 10.2.24 react: 18.2.0 dev: false @@ -3582,6 +3583,14 @@ packages: engines: {node: '>=6'} dev: true + /camera-controls/2.3.1_three@0.149.0: + resolution: {integrity: sha512-mGPDOqCTSUqaeX3yR3bWQ/p1M5CR8C+cnqndBxQugfGKysn1dhRtw8Q6sG1hq4GL8RPsGwRanwQk5zwQjyrxyQ==} + peerDependencies: + three: '>=0.126.1' + dependencies: + three: 0.149.0 + dev: false + /caniuse-lite/1.0.30001436: resolution: {integrity: sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg==} @@ -4246,8 +4255,8 @@ packages: engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} dev: true - /detect-gpu/5.0.6: - resolution: {integrity: sha512-RQXwjkDdU576ZwCqgCKuxvp5Vl65/T1sKthpVZ4WEb2k7o6CCNykR2+VkRcUq1nUW3xw+AUXgSUuVndgccewSA==} + /detect-gpu/5.0.12: + resolution: {integrity: sha512-HRI2Ci3hwfu9wtAikHpQ5MiGu3I7YDuWXshvkRtwCBAS2tYVqGd7x0fRzA19YjYgRXO6RFW5Yaf8o/xGYTojjg==} dependencies: webgl-constants: 1.1.1 dev: false @@ -6610,8 +6619,8 @@ packages: hasBin: true dev: true - /maath/0.5.1_arp7zvamcwb6gpsp77lqxsjc74: - resolution: {integrity: sha512-qSyiavNFnB957lGQiGvHr+fEgG3ZXrk2upniCAAMsZb54NaZfMLMFakHqp+22OKlix5UNwYqJ8vFeO4hAq0U1Q==} + /maath/0.5.2_arp7zvamcwb6gpsp77lqxsjc74: + resolution: {integrity: sha512-MFjfnXF5CzZaVnBuKc9y1FJh/BiPGqf19NH8Jm4o/jKTxuQ3RyPkcSIpuwdDhXrWROVKAxi3KjmHFUNMuIndbg==} peerDependencies: '@types/three': '>=0.144.0' three: '>=0.144.0' @@ -8679,16 +8688,16 @@ packages: resolution: {integrity: sha512-X9Mha8cVeBwakunlZXkXL6xRzw8VCcDGWqT59EzeTYAJIi8ien3CuufnEGEx4ZUFahumNQdoOwf4H2T9Ca6lBg==} dev: true - /three-mesh-bvh/0.5.21_three@0.149.0: - resolution: {integrity: sha512-TGXPk7YwtlU5rgQJYA25OT6yAdBMeekfC4BTkGNtTWA5glb2rmEpjxvhZncRQSl73QZir2LFOQT0FjfzgG55xw==} + /three-mesh-bvh/0.5.23_three@0.149.0: + resolution: {integrity: sha512-nyk+MskdyDgECqkxdv57UjazqqhrMi+Al9PxJN6yFtx1CTW4r0eCQ27FtyYKY5gCIWhxjtNfWYDPVy8lzx6LkA==} peerDependencies: three: '>= 0.123.0' dependencies: three: 0.149.0 dev: false - /three-stdlib/2.20.4_three@0.149.0: - resolution: {integrity: sha512-Ksy7h//nnH5dhohbmE6mT/gM54dtmcAjaC9Srx7AJ7xpmCEX3IASkZyUkVqNXv3NZFqx79Swq3sSSVqL4pF79Q==} + /three-stdlib/2.21.8_three@0.149.0: + resolution: {integrity: sha512-kqisiKvO4mSy59v5vWqBQSH8famLxp7Z51LxpMJI9GwDxqODaW02rhIwmjYDEzZWNFpjZpoDHVGbdpeHf8h3SA==} peerDependencies: three: '>=0.122.0' dependencies: diff --git a/src/components/home/Jellyfish.tsx b/src/components/home/Jellyfish.tsx index 9d27bdd1..1ecdcf5a 100644 --- a/src/components/home/Jellyfish.tsx +++ b/src/components/home/Jellyfish.tsx @@ -3,6 +3,7 @@ import { useGLTF } from "@react-three/drei"; import { BufferGeometry, Mesh } from "three"; import { Canvas, Euler, useFrame, Vector3 } from "@react-three/fiber"; import useWebGlEnabled from "hooks/useWebGlEnabled"; +import { GLTFResult } from "types/gltf"; export default function Jellyfish({ position, @@ -39,7 +40,7 @@ export default function Jellyfish({ } export function Model(props) { - const { nodes, materials } = useGLTF("/models/jellyfish.gltf"); + const { nodes, materials } = useGLTF("/models/jellyfish.gltf") as GLTFResult; return ( diff --git a/src/components/home/UnderwaterDrone.tsx b/src/components/home/UnderwaterDrone.tsx index 387d730b..24f555c1 100644 --- a/src/components/home/UnderwaterDrone.tsx +++ b/src/components/home/UnderwaterDrone.tsx @@ -3,6 +3,7 @@ import { useGLTF } from "@react-three/drei"; import { BufferGeometry, Mesh } from "three"; import { Canvas, Euler, useFrame, Vector3 } from "@react-three/fiber"; import useWebGlEnabled from "hooks/useWebGlEnabled"; +import { GLTFResult } from "types/gltf"; export default function UnderwaterDrone({ position, @@ -39,7 +40,9 @@ export default function UnderwaterDrone({ export function Model(props) { const group = useRef(); - const { nodes, materials } = useGLTF("/models/UnderwaterDrone.gltf"); + const { nodes, materials } = useGLTF( + "/models/UnderwaterDrone.gltf" + ) as GLTFResult; return ( diff --git a/src/types/gltf.ts b/src/types/gltf.ts new file mode 100644 index 00000000..1def5d34 --- /dev/null +++ b/src/types/gltf.ts @@ -0,0 +1,7 @@ +import { Material, Object3D } from "three"; +import { GLTF } from "three/examples/jsm/loaders/GLTFLoader"; + +export type GLTFResult = GLTF & { + nodes: { [name: string]: Object3D }; + materials: { [name: string]: Material }; +};