diff --git a/components/models/cloud-model.tsx b/components/models/cloud-model.tsx
index eeed698..03735fb 100644
--- a/components/models/cloud-model.tsx
+++ b/components/models/cloud-model.tsx
@@ -1,3 +1,4 @@
+import { easings, useSpring } from '@react-spring/three';
import { useFrame, useLoader, useThree } from '@react-three/fiber';
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
@@ -9,6 +10,26 @@ const CloudModel = () => {
const camera = useThree((state) => state.camera);
+ const [_, api] = useSpring(
+ {
+ from: {
+ z: camera.position.z,
+ },
+ config: {
+ duration: 1200,
+ easing: easings.easeOutCirc,
+ },
+ to: {
+ z: camera.position.z - 2,
+ },
+ pause: true,
+ onChange: (e) => {
+ camera.position.z = Number(e.value.z);
+ },
+ },
+ [],
+ );
+
const gltf = useLoader(
GLTFLoader,
'./models/cloud_station/modelDraco.gltf',
@@ -26,27 +47,27 @@ const CloudModel = () => {
gltf.scene.position.set(0, 0, 0);
camera.position.y = 2.2;
camera.lookAt(0, 1.2, 0);
+
+ setTimeout(() => {
+ api.resume();
+ }, 1000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// update camera position
const vec = useRef(new THREE.Vector3());
useFrame(({ mouse, camera }, delta) => {
- vec.current.set(-mouse.x * 2, -mouse.y * 2 + 2.2, camera.position.z);
mixer.current?.update(delta);
+ vec.current.set(-mouse.x * 3, -mouse.y * 3 + 2.2, camera.position.z);
camera.position.lerp(vec.current, 0.025);
camera.lookAt(0, 1.2, 0);
});
return (
<>
-
-
-
-
{/* */}
-
+ {/* */}
);
};
diff --git a/package.json b/package.json
index 58c7071..eec8ced 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@docsearch/react": "^3.5.2",
"@giscus/react": "^2.3.0",
"@mapbox/rehype-prism": "^0.8.0",
+ "@react-spring/three": "^9.7.3",
"@react-three/drei": "^9.83.9",
"@react-three/fiber": "^8.14.1",
"@tweenjs/tween.js": "^21.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cfb74c..9c7ed49 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
'@mapbox/rehype-prism':
specifier: ^0.8.0
version: 0.8.0
+ '@react-spring/three':
+ specifier: ^9.7.3
+ version: 9.7.3(@react-three/fiber@8.14.1)(react@18.2.0)(three@0.156.1)
'@react-three/drei':
specifier: ^9.83.9
version: 9.83.9(@react-three/fiber@8.14.1)(@types/three@0.155.0)(react-dom@18.2.0)(react@18.2.0)(three@0.156.1)
@@ -2015,6 +2018,16 @@ packages:
react: 18.2.0
dev: false
+ /@react-spring/animated@9.7.3(react@18.2.0):
+ resolution: {integrity: sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@react-spring/shared': 9.7.3(react@18.2.0)
+ '@react-spring/types': 9.7.3
+ react: 18.2.0
+ dev: false
+
/@react-spring/core@9.6.1(react@18.2.0):
resolution: {integrity: sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==}
peerDependencies:
@@ -2027,6 +2040,17 @@ packages:
react: 18.2.0
dev: false
+ /@react-spring/core@9.7.3(react@18.2.0):
+ resolution: {integrity: sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@react-spring/animated': 9.7.3(react@18.2.0)
+ '@react-spring/shared': 9.7.3(react@18.2.0)
+ '@react-spring/types': 9.7.3
+ react: 18.2.0
+ dev: false
+
/@react-spring/rafz@9.6.1:
resolution: {integrity: sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ==}
dev: false
@@ -2041,6 +2065,15 @@ packages:
react: 18.2.0
dev: false
+ /@react-spring/shared@9.7.3(react@18.2.0):
+ resolution: {integrity: sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@react-spring/types': 9.7.3
+ react: 18.2.0
+ dev: false
+
/@react-spring/three@9.6.1(@react-three/fiber@8.14.1)(react@18.2.0)(three@0.156.1):
resolution: {integrity: sha512-Tyw2YhZPKJAX3t2FcqvpLRb71CyTe1GvT3V+i+xJzfALgpk10uPGdGaQQ5Xrzmok1340DAeg2pR/MCfaW7b8AA==}
peerDependencies:
@@ -2057,10 +2090,30 @@ packages:
three: 0.156.1
dev: false
+ /@react-spring/three@9.7.3(@react-three/fiber@8.14.1)(react@18.2.0)(three@0.156.1):
+ resolution: {integrity: sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==}
+ peerDependencies:
+ '@react-three/fiber': '>=6.0'
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ three: '>=0.126'
+ dependencies:
+ '@react-spring/animated': 9.7.3(react@18.2.0)
+ '@react-spring/core': 9.7.3(react@18.2.0)
+ '@react-spring/shared': 9.7.3(react@18.2.0)
+ '@react-spring/types': 9.7.3
+ '@react-three/fiber': 8.14.1(react-dom@18.2.0)(react@18.2.0)(three@0.156.1)
+ react: 18.2.0
+ three: 0.156.1
+ dev: false
+
/@react-spring/types@9.6.1:
resolution: {integrity: sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q==}
dev: false
+ /@react-spring/types@9.7.3:
+ resolution: {integrity: sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==}
+ dev: false
+
/@react-three/drei@9.83.9(@react-three/fiber@8.14.1)(@types/three@0.155.0)(react-dom@18.2.0)(react@18.2.0)(three@0.156.1):
resolution: {integrity: sha512-WFwySXDbockMpOWCsx12JXEvWZgakw3LOmdiXYpd9kb5fJ+fBgaK4bNLMbJymfadpVIXjVaovWMqzUI98W1pxw==}
peerDependencies: