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==