From 2073b965c416d71887b62fdeea3a1cd35d709769 Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Fri, 30 Sep 2022 10:44:34 +0800 Subject: [PATCH] add canvas --- package.json | 4 +-- pages/index.tsx | 49 ++++++++++++++++++++++--------- public/images/img/hands.svg | 58 +++++++++++++++++++++++++++++++++++++ yarn.lock | 8 ++--- 4 files changed, 100 insertions(+), 19 deletions(-) create mode 100644 public/images/img/hands.svg diff --git a/package.json b/package.json index b64ada8..232a758 100644 --- a/package.json +++ b/package.json @@ -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" @@ -58,4 +58,4 @@ "tailwindcss": "^3.1.8", "typescript": "4.8.4" } -} +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index f652d5c..94c9870 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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(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,13 +37,26 @@ const Home: NextPageWithLayout = () => { RUA - HOME -
-
-
-

Hi there 👋, I'm Arthur.

+
+
+ {/*

Hi there 👋, I'm Arthur.

*/} +

+ + Hi there + + hands +

- {/* */} - {/*

I'm a Front-end developer. Yes, that's mean

+
+ +
+ {/*

I'm a Front-end developer. Yes, that's mean

setShowLang(true)} onMouseLeave={() => setShowLang(false)} @@ -64,7 +88,6 @@ const Home: NextPageWithLayout = () => {

Open source is my passion. It's making everything be great.{' '}

*/} -
diff --git a/public/images/img/hands.svg b/public/images/img/hands.svg new file mode 100644 index 0000000..80a056e --- /dev/null +++ b/public/images/img/hands.svg @@ -0,0 +1,58 @@ + + + + + + + + + + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 56c4198..d3c85e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"