add canvas

This commit is contained in:
DefectingCat
2022-09-30 10:44:34 +08:00
parent f1eca69d16
commit 2073b965c4
4 changed files with 100 additions and 19 deletions

View File

@ -32,7 +32,7 @@
"rehype-slug": "^5.0.1",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1",
"rua-three": "^1.0.5",
"rua-three": "^1.0.7",
"sharp": "^0.31.0",
"stats.js": "^0.17.0",
"three": "^0.145.0"

View File

@ -5,19 +5,30 @@ import { useState } from 'react';
import { InitFn, useThree } from 'rua-three';
import style from 'styles/index/index.module.css';
import type { NextPageWithLayout } from 'types';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import Image from 'next/future/image';
import { useRef } from 'react';
const MainLayout = dynamic(() => import('layouts/MainLayout'));
const init: InitFn = ({ scene, camera }) => {
camera.position.set(0, 5, 5);
};
console.log(OrbitControls);
const Home: NextPageWithLayout = () => {
const [showLang, setShowLang] = useState(false);
const wrapper = useRef<HTMLDivElement>(null);
const init: InitFn = ({ scene, camera, renderer }) => {
camera.position.set(0, 5, 5);
if (wrapper.current) {
renderer.setSize(
wrapper.current.clientWidth,
wrapper.current.clientHeight
);
}
};
const { ref } = useThree({
init,
width: 500,
height: 300,
alpha: true,
});
return (
@ -26,12 +37,25 @@ const Home: NextPageWithLayout = () => {
<title>RUA - HOME</title>
</Head>
<main className="min-h-[calc(100vh-142px)] flex justify-center items-center text-xl">
<div className="z-0 w-full max-w-3xl px-4 my-4 text-2xl">
<div className="max-w-xl leading-10">
<h1 className="pb-4 text-4xl">Hi there 👋, I&apos;m Arthur. </h1>
<main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
<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="flex pb-4 text-4xl">
<span className={cn('font-Aleo font-semibold', style.gradient)}>
Hi there
</span>
<Image
src="/images/img/hands.svg"
alt="hands"
width={36}
height={36}
className="ml-3"
/>
</h1>
{/* <canvas ref={ref}></canvas> */}
<div className="flex-1" ref={wrapper}>
<canvas ref={ref}></canvas>
</div>
{/* <p>I&apos;m a Front-end developer. Yes, that&apos;s mean</p>
<p
onMouseOver={() => setShowLang(true)}
@ -65,7 +89,6 @@ const Home: NextPageWithLayout = () => {
Open source is my passion. It&apos;s making everything be great.{' '}
</p> */}
</div>
</div>
</main>
</>
);

View File

@ -0,0 +1,58 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"
style="animation:dashoffset 4s both,fill-opacity 4s both,stroke-opacity 4s both " stroke="#edf2f6"
stroke-dasharray="500%" stroke-dashoffset="500%">
<style>
@keyframes stroke-opacity {
2%,
25% {
stroke-opacity: .75;
stroke-width: 2%
}
75%,
to {
stroke-opacity: 0;
stroke-width: 0
}
}
@keyframes fill-opacity {
10%,
25% {
fill-opacity: 0
}
0%,
50%,
to {
fill-opacity: 1
}
}
@keyframes dashoffset {
0%,
2% {
stroke-dashoffset: 500%
}
to {
stroke-dashoffset: 0%
}
}
</style>
<path fill="#EF9645"
d="M4.861 9.147c.94-.657 2.357-.531 3.201.166l-.968-1.407c-.779-1.111-.5-2.313.612-3.093 1.112-.777 4.263 1.312 4.263 1.312-.786-1.122-.639-2.544.483-3.331a2.483 2.483 0 013.456.611l10.42 14.72L25 31l-11.083-4.042L4.25 12.625a2.495 2.495 0 01.611-3.478z" />
<path fill="#FFDC5D"
d="M2.695 17.336s-1.132-1.65.519-2.781c1.649-1.131 2.78.518 2.78.518l5.251 7.658c.181-.302.379-.6.6-.894L4.557 11.21s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l6.855 9.997c.255-.208.516-.417.785-.622L7.549 6.732s-1.131-1.649.519-2.78c1.649-1.131 2.78.518 2.78.518l7.947 11.589c.292-.179.581-.334.871-.498L12.238 4.729s-1.131-1.649.518-2.78c1.649-1.131 2.78.518 2.78.518l7.854 11.454 1.194 1.742c-4.948 3.394-5.419 9.779-2.592 13.902.565.825 1.39.26 1.39.26-3.393-4.949-2.357-10.51 2.592-13.903L24.515 8.62s-.545-1.924 1.378-2.47c1.924-.545 2.47 1.379 2.47 1.379l1.685 5.004c.668 1.984 1.379 3.961 2.32 5.831 2.657 5.28 1.07 11.842-3.94 15.279-5.465 3.747-12.936 2.354-16.684-3.11L2.695 17.336z" />
<g fill="#5DADEC">
<path
d="M12 32.042C8 32.042 3.958 28 3.958 24c0-.553-.405-1-.958-1s-1.042.447-1.042 1C1.958 30 6 34.042 12 34.042c.553 0 1-.489 1-1.042s-.447-.958-1-.958z" />
<path
d="M7 34c-3 0-5-2-5-5a1 1 0 10-2 0c0 4 3 7 7 7a1 1 0 100-2zM24 2a1 1 0 000 2c4 0 8 3.589 8 8a1 1 0 002 0c0-5.514-4-10-10-10z" />
<path
d="M29 .042c-.552 0-1 .406-1 .958s.448 1.042 1 1.042c3 0 4.958 2.225 4.958 4.958 0 .552.489 1 1.042 1s.958-.448.958-1C35.958 3.163 33 .042 29 .042z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -7761,10 +7761,10 @@ rimraf@^3.0.2:
dependencies:
glob "^7.1.3"
rua-three@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/rua-three/-/rua-three-1.0.5.tgz#a726d7472e964cb63b3897861aeeac4f5b78bb9f"
integrity sha512-a9N2y7Pyq4R1gsa9KRbNvUX6mrY5B3w9NuqUuzvzO32+u9tdC+LwAwqC26s8Inhd34gB12N2INQGk55rR0i0PQ==
rua-three@^1.0.7:
version "1.0.7"
resolved "https://registry.npmjs.org/rua-three/-/rua-three-1.0.7.tgz#85942c54b2dac4fceba0c51860f68d7db2f27f1f"
integrity sha512-7wBQwEonxjtce8cKznR286gRoBP/hF7/feQ9KeKw5i+fqcOSp8KpXtZhjPRcxEKqe0fjZDfHz/84ta3pOesWOA==
run-async@^2.4.0:
version "2.4.1"