xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 08:41:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

add camera zoom animation

Browse Source 
add react spring
This commit is contained in:
DefectingCat
2023-09-15 11:08:51 +08:00
parent c9038f72ec
commit f1183a5eca
3 changed files with 81 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/models/cloud-model.tsx
View File

@ -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 (
<>
<mesh position={[0, 1.2, 0]}>
<boxGeometry />
<meshStandardMaterial />
</mesh>
<primitive object={gltf.scene} />
{/* <OrbitControls /> */}
<axesHelper args={[5]} />
{/* <axesHelper args={[5]} /> */}
</>
);
};

1
package.json
View File

@ -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",

53
pnpm-lock.yaml generated
View File

@ -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: