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

add model loading

Browse Source
This commit is contained in:
DefectingCat
2022-09-30 17:00:58 +08:00
parent e6419f2188
commit 17e2dad908
2 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/index.tsx
View File

@ -4,13 +4,15 @@ import Image from 'next/future/image';
import Head from 'next/head'; import Head from 'next/head';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { InitFn, THREE, useThree } from 'rua-three'; import { InitFn, THREE, useThree } from 'rua-three';
import style from 'styles/index/index.module.css'; import styles from 'styles/index/index.module.css';
import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import type { NextPageWithLayout } from 'types'; import type { NextPageWithLayout } from 'types';
const MainLayout = dynamic(() => import('layouts/MainLayout')); const MainLayout = dynamic(() => import('layouts/MainLayout'));
const Loading = dynamic(() => import('components/RUA/loading/RUALoading'));
const gltfLoader = new GLTFLoader(); const manager = new THREE.LoadingManager();
const gltfLoader = new GLTFLoader(manager);
const Home: NextPageWithLayout = () => { const Home: NextPageWithLayout = () => {
const wrapper = useRef<HTMLDivElement>(null); const wrapper = useRef<HTMLDivElement>(null);
@ -19,6 +21,15 @@ const Home: NextPageWithLayout = () => {
height: 300, height: 300,
}); });
const [loading, setLoading] = useState(true);
const [showLoading, setShowLoading] = useState(true);
manager.onLoad = () => {
setLoading(false);
setTimeout(() => {
setShowLoading(false);
}, 300);
};
const setCanvasSize = () => { const setCanvasSize = () => {
if (!wrapper.current) return; if (!wrapper.current) return;
const width = wrapper.current.clientWidth; const width = wrapper.current.clientWidth;
@ -87,7 +98,7 @@ const Home: NextPageWithLayout = () => {
<div className="z-0 flex flex-col w-full h-full max-w-4xl px-4 py-32 text-2xl"> <div className="z-0 flex flex-col w-full h-full max-w-4xl px-4 py-32 text-2xl">
{/* <h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1> */} {/* <h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1> */}
<h1 className="flex pb-4 text-5xl"> <h1 className="flex pb-4 text-5xl">
<span className={cn('font-Aleo font-semibold', style.gradient)}> <span className={cn('font-Aleo font-semibold', styles.gradient)}>
Hi there Hi there
</span> </span>
<span className="ml-3"> <span className="ml-3">
@ -100,8 +111,24 @@ const Home: NextPageWithLayout = () => {
</span> </span>
</h1> </h1>
<div className="relative flex-1" ref={wrapper}> <div
className="relative flex-1 overflow-hidden rounded-xl"
ref={wrapper}
>
<canvas ref={ref} className="absolute top-0 left-0"></canvas> <canvas ref={ref} className="absolute top-0 left-0"></canvas>
{showLoading && (
<div
className={cn(
'absolute top-0 left-0 z-10 ',
'items-center flex justify-center',
'w-full h-full transition-all duration-500',
'bg-white',
loading ? 'opacity-1' : 'opacity-0'
)}
>
<Loading />
</div>
)}
</div> </div>
{/* <p>I&apos;m a Front-end developer. Yes, that&apos;s mean</p> {/* <p>I&apos;m a Front-end developer. Yes, that&apos;s mean</p>
<p <p

40
styles/index/index.module.css
View File

@ -1,25 +1,25 @@
.gradient { .gradient {
background: rgb(238, 174, 200); background: rgb(238, 174, 200);
background: linear-gradient( background: linear-gradient(
45deg, 45deg,
rgba(238, 174, 200, 1) 0%, rgba(238, 174, 200, 1) 0%,
rgba(148, 187, 233, 1) 100% rgba(148, 187, 233, 1) 100%
); );
background-size: 400%; background-size: 400%;
animation: gradient 5s ease infinite; animation: gradient 5s ease infinite;
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@keyframes gradient { @keyframes gradient {
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }
100% { 100% {
background-position: 0% 50%; background-position: 0% 50%;
} }
} }