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

fix(loading): position

Browse Source
This commit is contained in:
xfy
2025-05-23 00:57:52 +08:00
parent f07c515cd7
commit e1347ef693
7 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/models/home/bocchi.tsx
View File

@ -1,4 +1,4 @@
import { useGLTF, Float } from '@react-three/drei'; import { Float, useGLTF } from '@react-three/drei';
import { useLoader } from '@react-three/fiber'; import { useLoader } from '@react-three/fiber';
import { JSX, useMemo } from 'react'; import { JSX, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
@ -44,7 +44,7 @@ const BocchiRubbishBin = (props: JSX.IntrinsicElements['group']) => {
}, [isMobile]); }, [isMobile]);
return ( return (
<Float floatIntensity={1.6}> <Float floatIntensity={2}>
<group <group
{...props} {...props}
dispose={null} dispose={null}

4
components/models/home/computer-desk.tsx
View File

@ -2,7 +2,7 @@
import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera'; import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
import { Canvas } from '@react-three/fiber'; import { Canvas } from '@react-three/fiber';
import { lazy, Suspense, useMemo } from 'react'; import { Suspense, lazy, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
import Loading from './loading'; import Loading from './loading';
@ -38,8 +38,8 @@ const ComputerDesk = () => {
</DeskCamera> </DeskCamera>
<Target /> <Target />
<ReactLogo /> <ReactLogo />
<PerspectiveCamera makeDefault position={[0, 0, 36]} />
<Bocchi /> <Bocchi />
<PerspectiveCamera makeDefault position={[0, 0, 36]} />
</Suspense> </Suspense>
</Canvas> </Canvas>
{/* <Leva /> */} {/* <Leva /> */}

4
components/models/home/desk-camera.tsx
View File

@ -1,8 +1,8 @@
import * as THREE from 'three';
import { JSX, useRef } from 'react';
import { useFrame } from '@react-three/fiber'; import { useFrame } from '@react-three/fiber';
import { easing } from 'maath'; import { easing } from 'maath';
import { JSX, useRef } from 'react';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
import * as THREE from 'three';
const DeskCamera = ({ children }: { children: JSX.Element }) => { const DeskCamera = ({ children }: { children: JSX.Element }) => {
const groupRef = useRef<THREE.Group>(null); const groupRef = useRef<THREE.Group>(null);

10
components/models/home/loading.tsx
View File

@ -1,20 +1,18 @@
import { Html, useProgress } from '@react-three/drei'; import { Html } from '@react-three/drei';
import clsx from 'clsx'; import clsx from 'clsx';
import RUALoading from 'components/rua/loading/rua-loading'; import RUALoading from 'components/rua/loading/rua-loading';
const Loading = () => { const Loading = () => {
// const { progress } = useProgress();
// console.log(progress);
return ( return (
<Html as="div"> <Html as="div">
<div <div
className={clsx( className={clsx(
'h-full w-full absolute', 'h-[100vh] w-[100vw] fixed',
'top-0 left-0 flex', 'top-0 left-0 flex z-50',
'justify-center items-center', 'justify-center items-center',
'bg-bluish-gray dark:bg-rua-gray-900', 'bg-bluish-gray dark:bg-rua-gray-900',
'transition-all duration-300', 'transition-all duration-300',
'translate-x-[-50%] translate-y-[-50%]',
)} )}
> >
<RUALoading /> <RUALoading />

4
components/models/home/react-logo.tsx
View File

@ -1,4 +1,4 @@
import { useGLTF, Float } from '@react-three/drei'; import { Float, useGLTF } from '@react-three/drei';
import { useLoader } from '@react-three/fiber'; import { useLoader } from '@react-three/fiber';
import { JSX, useMemo } from 'react'; import { JSX, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
@ -34,7 +34,7 @@ export function ReactLogo(props: JSX.IntrinsicElements['group']) {
}, [isMobile]); }, [isMobile]);
return ( return (
<Float floatIntensity={1.6}> <Float floatIntensity={2}>
<group {...props} dispose={null}> <group {...props} dispose={null}>
<group scale={0.3} position={position}> <group scale={0.3} position={position}>
<mesh <mesh

12
components/models/home/target.tsx
View File

@ -1,14 +1,14 @@
import { useGSAP } from '@gsap/react';
import { useGLTF } from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import gsap from 'gsap';
import React, { JSX, useMemo, useRef } from 'react';
import { useMediaQuery } from 'react-responsive';
/** /**
* Samll target item in home page * Samll target item in home page
*/ */
import * as THREE from 'three'; import * as THREE from 'three';
import React, { JSX, useMemo, useRef } from 'react';
import { useGLTF } from '@react-three/drei';
import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib'; import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib';
import { useLoader } from '@react-three/fiber';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import { useMediaQuery } from 'react-responsive';
type GLTFResult = GLTF & { type GLTFResult = GLTF & {
nodes: { nodes: {

1
components/rua/loading/rua-loading.tsx
View File

@ -29,7 +29,6 @@ const RUALoading = ({ className: classNames }: Props) => {
alt="Loading" alt="Loading"
unoptimized unoptimized
/> />
<span className="my-4">rua rua rua...</span> <span className="my-4">rua rua rua...</span>
</div> </div>
); );