diff --git a/README.md b/README.md
index 39f9d50..dac2858 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
## Generative Art
-p5.jsを使ったクリエティブ
+クリエイティブコーディングを試す。
https://generative-art-sigma.vercel.app/
diff --git a/package.json b/package.json
index b7912d0..1f2a656 100644
--- a/package.json
+++ b/package.json
@@ -12,15 +12,18 @@
"@chakra-ui/react": "1.6.8",
"@emotion/react": "11.4.1",
"@emotion/styled": "11.3.0",
+ "@react-three/fiber": "^7.0.7",
"framer-motion": "4.1.17",
"next": "11.1.2",
"p5": "1.4.0",
"react": "17.0.2",
- "react-dom": "17.0.2"
+ "react-dom": "17.0.2",
+ "three": "^0.132.2"
},
"devDependencies": {
"@types/p5": "1.3.1",
"@types/react": "17.0.24",
+ "@types/three": "^0.132.1",
"eslint": "7.32.0",
"eslint-config-next": "11.1.2",
"typescript": "4.4.3"
diff --git a/pages/index.tsx b/pages/index.tsx
index 21879bc..f486961 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,6 +17,11 @@ const Home: NextPage = () => {
p5.js Examples
+
+
+ Three.js
+
+
);
diff --git a/pages/threejs/example.tsx b/pages/threejs/example.tsx
new file mode 100644
index 0000000..b35b496
--- /dev/null
+++ b/pages/threejs/example.tsx
@@ -0,0 +1,43 @@
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ Heading,
+ List,
+ ListItem,
+} from "@chakra-ui/react";
+import type { NextPage } from "next";
+import Link from "next/link";
+
+import { Layout } from "src/components/Layout";
+import { Example } from "src/threejs/example";
+
+const Threejs: NextPage = () => {
+ return (
+
+
+
+
+ Home
+
+
+
+
+ Three.js
+
+
+
+ example
+
+
+
+
+ Example
+
+
+
+
+ );
+};
+
+export default Threejs;
diff --git a/pages/threejs/index.tsx b/pages/threejs/index.tsx
new file mode 100644
index 0000000..02fc0ce
--- /dev/null
+++ b/pages/threejs/index.tsx
@@ -0,0 +1,43 @@
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ Heading,
+ List,
+ ListItem,
+} from "@chakra-ui/react";
+import type { NextPage } from "next";
+import Link from "next/link";
+
+import { Layout } from "src/components/Layout";
+
+const Threejs: NextPage = () => {
+ return (
+
+
+
+
+ Home
+
+
+
+ Three.js
+
+
+
+
+ Three.js
+
+
+
+
+
+ threejs
+
+
+
+
+ );
+};
+
+export default Threejs;
diff --git a/src/threejs/example.tsx b/src/threejs/example.tsx
new file mode 100644
index 0000000..86053a7
--- /dev/null
+++ b/src/threejs/example.tsx
@@ -0,0 +1,37 @@
+import React, { useRef } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Mesh } from "three";
+
+const Thing = () => {
+ const ref = useRef(null);
+
+ useFrame(() => {
+ if (ref.current === null) return;
+ ref.current.rotation.z += 0.01;
+ });
+
+ return (
+ console.log("click")}
+ onPointerOver={() => console.log("hover")}
+ onPointerOut={() => console.log("unhover")}
+ >
+
+
+
+ );
+};
+
+export const Example = () => {
+ return (
+
+ );
+};
diff --git a/yarn.lock b/yarn.lock
index 5864bf3..642f0ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -925,6 +925,22 @@
prop-types "^15.7.2"
tslib "^2.1.0"
+"@react-three/fiber@^7.0.7":
+ version "7.0.7"
+ resolved "https://registry.yarnpkg.com/@react-three/fiber/-/fiber-7.0.7.tgz#32a3fc43871890d03ce55fd08db064e4c7af308a"
+ integrity sha512-cDRweUmJUbyGSn1j0r3bzKdS+MobIA93LR0j3pa2XOpjutKJsS2va38xEbbGK7ODTKVvCOdjJ9xlBB4TSS1Vhg==
+ dependencies:
+ "@babel/runtime" "^7.13.10"
+ react-merge-refs "^1.1.0"
+ react-reconciler "^0.26.2"
+ react-three-fiber "0.0.0-deprecated"
+ react-use-measure "^2.0.4"
+ resize-observer-polyfill "^1.5.1"
+ scheduler "^0.20.2"
+ use-asset "^1.0.4"
+ utility-types "^3.10.0"
+ zustand "^3.5.1"
+
"@rushstack/eslint-patch@^1.0.6":
version "1.0.7"
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.7.tgz#82f83dcc2eb9b1e1d559b3aca96783e285eb8592"
@@ -981,6 +997,11 @@
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+"@types/three@^0.132.1":
+ version "0.132.1"
+ resolved "https://registry.yarnpkg.com/@types/three/-/three-0.132.1.tgz#16e0889fdbd41259c2fdf18ff2444baa0afc8e57"
+ integrity sha512-d+eB9/zaK7Bo690EmWCrMwutNWiMYGnW+G5cRO4jvRHvKhI/fe2B2d6xHf1MW0yl+nQ0ij+ctezYGePWtVhAAA==
+
"@types/warning@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
@@ -1642,6 +1663,11 @@ data-uri-to-buffer@3.0.1:
resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
+debounce@^1.2.0:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+ integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
debug@2, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3477,6 +3503,20 @@ react-is@^16.7.0, react-is@^16.8.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+react-merge-refs@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
+ integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
+
+react-reconciler@^0.26.2:
+ version "0.26.2"
+ resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.2.tgz#bbad0e2d1309423f76cf3c3309ac6c96e05e9d91"
+ integrity sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==
+ dependencies:
+ loose-envify "^1.1.0"
+ object-assign "^4.1.1"
+ scheduler "^0.20.2"
+
react-refresh@0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -3510,6 +3550,18 @@ react-style-singleton@^2.1.0:
invariant "^2.2.4"
tslib "^1.0.0"
+react-three-fiber@0.0.0-deprecated:
+ version "0.0.0-deprecated"
+ resolved "https://registry.yarnpkg.com/react-three-fiber/-/react-three-fiber-0.0.0-deprecated.tgz#c737242487d824cf9520307308b7e4c4071a278f"
+ integrity sha512-EblIqTAsIpkYeM8bZtC4lcpTE0A2zCEGipFB52RgcQq/q+0oryrk7Sxt+sqhIjUu6xMNEVywV8dr74lz5yWO6A==
+
+react-use-measure@^2.0.4:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.4.tgz#cb675b36eaeaf3681b94d5f5e08b2a1e081fedc9"
+ integrity sha512-7K2HIGaPMl3Q9ZQiEVjen3tRXl4UDda8LiTPy/QxP8dP2rl5gPBhf7mMH6MVjjRNv3loU7sNzey/ycPNnHVTxQ==
+ dependencies:
+ debounce "^1.2.0"
+
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -3587,6 +3639,11 @@ require-from-string@^2.0.2:
resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+resize-observer-polyfill@^1.5.1:
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+ integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
resolve-from@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -3999,6 +4056,11 @@ text-table@^0.2.0:
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+three@^0.132.2:
+ version "0.132.2"
+ resolved "https://registry.yarnpkg.com/three/-/three-0.132.2.tgz#95eb1856147237c03e887cbbe56f964b6fb40b5e"
+ integrity sha512-0wcR7LxxkXMn6Gi58gEs3QvY8WpTVXA31L2VOvpjm4ZPYFRHCZC13UqynheFoS5OXDYgtBneN0dhbaNBE8iLhQ==
+
timers-browserify@2.0.12, timers-browserify@^2.0.4:
version "2.0.12"
resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
@@ -4139,6 +4201,13 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
+use-asset@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/use-asset/-/use-asset-1.0.4.tgz#506caafc29f602890593799e58b577b70293a6e2"
+ integrity sha512-7/hqDrWa0iMnCoET9W1T07EmD4Eg/Wmoj/X8TGBc++ECRK4m5yTsjP4O6s0yagbxfqIOuUkIxe2/sA+VR2GxZA==
+ dependencies:
+ fast-deep-equal "^3.1.3"
+
use-callback-ref@^1.2.1, use-callback-ref@^1.2.3:
version "1.2.5"
resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
@@ -4190,6 +4259,11 @@ util@^0.11.0:
dependencies:
inherits "2.0.3"
+utility-types@^3.10.0:
+ version "3.10.0"
+ resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
+ integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
+
v8-compile-cache@^2.0.3:
version "2.3.0"
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -4296,3 +4370,8 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^3.5.1:
+ version "3.5.11"
+ resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.11.tgz#3a8fd24f7a63d02a6532ab230accc2108051d635"
+ integrity sha512-V3Ys0ik2flOnWr0h9D4ZTCdcpK4feg71vLWaxjw+D+PLxM0+6KITdLedgDa97yAS6YDQTBD0Gw+NbsdAiMCqfA==