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 { JSX, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive';
@ -44,7 +44,7 @@ const BocchiRubbishBin = (props: JSX.IntrinsicElements['group']) => {
}, [isMobile]);
return (
<Float floatIntensity={1.6}>
<Float floatIntensity={2}>
<group
{...props}
dispose={null}

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

@ -2,7 +2,7 @@
import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
import { Canvas } from '@react-three/fiber';
import { lazy, Suspense, useMemo } from 'react';
import { Suspense, lazy, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive';
import Loading from './loading';
@ -38,8 +38,8 @@ const ComputerDesk = () => {
</DeskCamera>
<Target />
<ReactLogo />
<PerspectiveCamera makeDefault position={[0, 0, 36]} />
<Bocchi />
<PerspectiveCamera makeDefault position={[0, 0, 36]} />
</Suspense>
</Canvas>
{/* <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 { easing } from 'maath';
import { JSX, useRef } from 'react';
import { useMediaQuery } from 'react-responsive';
import * as THREE from 'three';
const DeskCamera = ({ children }: { children: JSX.Element }) => {
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 RUALoading from 'components/rua/loading/rua-loading';
const Loading = () => {
// const { progress } = useProgress();
// console.log(progress);
return (
<Html as="div">
<div
className={clsx(
'h-full w-full absolute',
'top-0 left-0 flex',
'h-[100vh] w-[100vw] fixed',
'top-0 left-0 flex z-50',
'justify-center items-center',
'bg-bluish-gray dark:bg-rua-gray-900',
'transition-all duration-300',
'translate-x-[-50%] translate-y-[-50%]',
)}
>
<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 { JSX, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive';
@ -34,7 +34,7 @@ export function ReactLogo(props: JSX.IntrinsicElements['group']) {
}, [isMobile]);
return (
<Float floatIntensity={1.6}>
<Float floatIntensity={2}>
<group {...props} dispose={null}>
<group scale={0.3} position={position}>
<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
*/
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 { useLoader } from '@react-three/fiber';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import { useMediaQuery } from 'react-responsive';
type GLTFResult = GLTF & {
nodes: {

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

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