update about page camera animation

This commit is contained in:
DefectingCat
2023-09-15 11:59:30 +08:00
parent f1183a5eca
commit a67c419f77
2 changed files with 47 additions and 10 deletions

View File

@ -9,8 +9,8 @@ const CloudModel = lazy(() => import('components/models/cloud-model'));
const AboutModel = () => {
return (
<>
<div className={clsx('fixed top-0 left-0 z-10', 'w-full h-full')}>
<Canvas>
<div className={clsx('fixed top-0 left-0 -z-10', 'w-full h-full')}>
<Canvas camera={{ position: [0, 1.8, 10] }}>
<ambientLight color={0xffffff} intensity={0.6} />
<Suspense fallback={<></>}>
<CloudModel />

View File

@ -1,15 +1,30 @@
import { easings, useSpring } from '@react-spring/three';
import { useFrame, useLoader, useThree } from '@react-three/fiber';
import { getMousePosition } from 'lib/utils';
import { useTheme } from 'next-themes';
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { rotationX, rotationY } from './home-model';
const CloudModel = () => {
const mixer = useRef<THREE.AnimationMixer | null>(null);
const camera = useThree((state) => state.camera);
// After model loading, set theme to dark mode.
const restore = useRef(false);
const { systemTheme, theme, setTheme } = useTheme();
const currentTheme = theme === 'system' ? systemTheme : theme;
// setDarkMode is async called by setTimeout, when component is unmounted
// it should not be called.
const setDarkMode = () => {
if (currentTheme === 'dark') return;
restore.current = true;
document.body.style.transition = 'all 1.2s ease-out';
setTheme('dark');
};
const [_, api] = useSpring(
{
from: {
@ -20,7 +35,7 @@ const CloudModel = () => {
easing: easings.easeOutCirc,
},
to: {
z: camera.position.z - 2,
z: camera.position.z - 5.2,
},
pause: true,
onChange: (e) => {
@ -45,22 +60,44 @@ const CloudModel = () => {
mixer.current?.clipAction(clip).play();
});
gltf.scene.position.set(0, 0, 0);
camera.position.y = 2.2;
camera.lookAt(0, 1.2, 0);
camera.lookAt(0, 1, 0);
const halfWidth = Math.floor(window.innerWidth / 2);
const halfHeight = Math.floor(window.innerHeight / 2);
const moveHandler = (e: MouseEvent | globalThis.TouchEvent) => {
const { x, y } = getMousePosition(e);
// > 0 is right, < 0 is left
// if (directionX > 0) root.rotation.y += 0.01;
gltf.scene.rotation.x = rotationX * ((y - halfHeight) / halfHeight);
gltf.scene.rotation.y = rotationY * ((x - halfWidth) / halfWidth);
};
window.addEventListener('mousemove', moveHandler);
window.addEventListener('touchmove', moveHandler);
setTimeout(() => {
api.resume();
setDarkMode();
}, 1000);
return () => {
window.removeEventListener('mousemove', moveHandler);
window.removeEventListener('touchmove', moveHandler);
if (!restore.current) return;
setTheme('light');
document.body.style.transition = 'all 0.3s ease-out';
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// update camera position
const vec = useRef(new THREE.Vector3());
useFrame(({ mouse, camera }, delta) => {
// const vec = useRef(new THREE.Vector3());
useFrame((_, delta) => {
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);
// 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 (