xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add model ratate with mouse

Browse Source
This commit is contained in:
DefectingCat
2023-05-16 15:33:29 +08:00
parent 29e503693d
commit 5352b56a03
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/home-modle.tsx
View File

@ -8,6 +8,10 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import Loading from 'components/rua/loading/rua-loading'; import Loading from 'components/rua/loading/rua-loading';
import clsx from 'clsx'; import clsx from 'clsx';
import { getMousePosition } from 'lib/utils';
const rotationY = 0.4;
const rotationX = 0.18;
const Model = () => { const Model = () => {
const mixer = useRef<THREE.AnimationMixer | null>(null); const mixer = useRef<THREE.AnimationMixer | null>(null);
@ -34,6 +38,25 @@ const Model = () => {
camera.position.z = 1.3; camera.position.z = 1.3;
toggleLoading(false); toggleLoading(false);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
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);
return () => {
window.removeEventListener('mousemove', moveHandler);
window.removeEventListener('touchmove', moveHandler);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useFrame((_, delta) => { useFrame((_, delta) => {