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

add get mouse position function

Browse Source
This commit is contained in:
DefectingCat
2022-10-10 09:16:03 +08:00
parent d5604e4b2e
commit 3f6b7f0825
3 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/utils/index.ts
View File

@ -85,3 +85,15 @@ export const generateToc = (source: string) => {
return toc;
};
export const getMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
return e instanceof MouseEvent
? {
x: e.clientX,
y: e.clientY,
}
: {
x: e.touches[0].clientX,
y: e.touches[0].clientY,
};
};

29
pages/about.tsx
View File

@ -1,9 +1,10 @@
import classNames from 'classnames';
import dynamic from 'next/dynamic';
import { InitFn, useThree, THREE } from 'rua-three';
import { NextPageWithLayout } from 'types';
import TWEEN from '@tweenjs/tween.js';
import classNames from 'classnames';
import { getMousePosition } from 'lib/utils';
import dynamic from 'next/dynamic';
import { InitFn, THREE, useThree } from 'rua-three';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { NextPageWithLayout } from 'types';
const glftLoader = new GLTFLoader();
const rotationY = 0.4;
@ -71,7 +72,7 @@ const About: NextPageWithLayout = () => {
cameraY: entryValue.cameraY + 0.5,
z: entryValue.z - 16,
},
1000
1200
)
.onUpdate((obj) => {
// root.rotation.y = obj.rotationY;
@ -93,23 +94,11 @@ const About: NextPageWithLayout = () => {
const halfHeight = Math.floor(window.innerHeight / 2);
const updateMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
let x;
let y;
if (e instanceof MouseEvent) {
x = e.clientX;
y = e.clientY;
} else {
x = e.touches[0].clientX;
y = e.touches[0].clientY;
}
const { x, y } = getMousePosition(e);
// > 0 is right, < 0 is left
const directionX = x - halfWidth;
const directionY = y - halfHeight;
// if (directionX > 0) root.rotation.y += 0.01;
root.rotation.y = rotationY * (directionX / halfWidth);
root.rotation.x = rotationX * (directionY / halfHeight);
root.rotation.y = rotationY * (x - halfWidth / halfWidth);
root.rotation.x = rotationX * (y - halfHeight / halfHeight);
};
addWindowEvent('mousemove', updateMousePosition, {

19
pages/index.tsx
View File

@ -1,4 +1,5 @@
import cn from 'classnames';
import { getMousePosition } from 'lib/utils';
import dynamic from 'next/dynamic';
import Image from 'next/future/image';
import Head from 'next/head';
@ -107,23 +108,11 @@ const Home: NextPageWithLayout = () => {
const halfHeight = Math.floor(window.innerHeight / 2);
const updateMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
let x;
let y;
if (e instanceof MouseEvent) {
x = e.clientX;
y = e.clientY;
} else {
x = e.touches[0].clientX;
y = e.touches[0].clientY;
}
const { x, y } = getMousePosition(e);
// > 0 is right, < 0 is left
const directionX = x - halfWidth;
const directionY = y - halfHeight;
// if (directionX > 0) root.rotation.y += 0.01;
root.rotation.y = rotationY * (directionX / halfWidth);
root.rotation.x = rotationX * (directionY / halfHeight);
root.rotation.y = rotationY * (x - halfWidth / halfWidth);
root.rotation.x = rotationX * (y - halfHeight / halfHeight);
};
addWindowEvent('mousemove', updateMousePosition, {