Skip to content

Commit fa4b499

Browse files
nszknaonszknao
committed
add threejs
1 parent 6082ca9 commit fa4b499

File tree

7 files changed

+212
-2
lines changed

7 files changed

+212
-2
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
## Generative Art
2-
p5.jsを使ったクリエティブ
2+
クリエイティブコーディングを試す。
33

44
https://generative-art-sigma.vercel.app/

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@
1212
"@chakra-ui/react": "1.6.8",
1313
"@emotion/react": "11.4.1",
1414
"@emotion/styled": "11.3.0",
15+
"@react-three/fiber": "^7.0.7",
1516
"framer-motion": "4.1.17",
1617
"next": "11.1.2",
1718
"p5": "1.4.0",
1819
"react": "17.0.2",
19-
"react-dom": "17.0.2"
20+
"react-dom": "17.0.2",
21+
"three": "^0.132.2"
2022
},
2123
"devDependencies": {
2224
"@types/p5": "1.3.1",
2325
"@types/react": "17.0.24",
26+
"@types/three": "^0.132.1",
2427
"eslint": "7.32.0",
2528
"eslint-config-next": "11.1.2",
2629
"typescript": "4.4.3"

‎pages/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ const Home: NextPage = () => {
1717
<a>p5.js Examples</a>
1818
</Link>
1919
</ListItem>
20+
<ListItem textDecoration="underline">
21+
<Link href="/threejs">
22+
<a>Three.js</a>
23+
</Link>
24+
</ListItem>
2025
</List>
2126
</Layout>
2227
);

‎pages/threejs/example.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {
2+
Breadcrumb,
3+
BreadcrumbItem,
4+
BreadcrumbLink,
5+
Heading,
6+
List,
7+
ListItem,
8+
} from "@chakra-ui/react";
9+
import type { NextPage } from "next";
10+
import Link from "next/link";
11+
12+
import { Layout } from "src/components/Layout";
13+
import { Example } from "src/threejs/example";
14+
15+
const Threejs: NextPage = () => {
16+
return (
17+
<Layout>
18+
<Breadcrumb fontWeight="medium" fontSize="sm" mb={4}>
19+
<BreadcrumbItem>
20+
<Link href="/" passHref>
21+
<BreadcrumbLink>Home</BreadcrumbLink>
22+
</Link>
23+
</BreadcrumbItem>
24+
<BreadcrumbItem>
25+
<Link href="/threejs" passHref>
26+
<BreadcrumbLink>Three.js</BreadcrumbLink>
27+
</Link>
28+
</BreadcrumbItem>
29+
<BreadcrumbItem>
30+
<BreadcrumbLink isCurrentPage>example</BreadcrumbLink>
31+
</BreadcrumbItem>
32+
</Breadcrumb>
33+
34+
<Heading as="h1" size="lg" mb={4}>
35+
Example
36+
</Heading>
37+
38+
<Example />
39+
</Layout>
40+
);
41+
};
42+
43+
export default Threejs;

‎pages/threejs/index.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {
2+
Breadcrumb,
3+
BreadcrumbItem,
4+
BreadcrumbLink,
5+
Heading,
6+
List,
7+
ListItem,
8+
} from "@chakra-ui/react";
9+
import type { NextPage } from "next";
10+
import Link from "next/link";
11+
12+
import { Layout } from "src/components/Layout";
13+
14+
const Threejs: NextPage = () => {
15+
return (
16+
<Layout>
17+
<Breadcrumb fontWeight="medium" fontSize="sm" mb={4}>
18+
<BreadcrumbItem>
19+
<Link href="/" passHref>
20+
<BreadcrumbLink>Home</BreadcrumbLink>
21+
</Link>
22+
</BreadcrumbItem>
23+
<BreadcrumbItem>
24+
<BreadcrumbLink isCurrentPage>Three.js</BreadcrumbLink>
25+
</BreadcrumbItem>
26+
</Breadcrumb>
27+
28+
<Heading as="h1" size="lg" mb={4}>
29+
Three.js
30+
</Heading>
31+
32+
<List spacing={3}>
33+
<ListItem textDecoration="underline">
34+
<Link href="/threejs/example">
35+
<a>threejs</a>
36+
</Link>
37+
</ListItem>
38+
</List>
39+
</Layout>
40+
);
41+
};
42+
43+
export default Threejs;

‎src/threejs/example.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { useRef } from "react";
2+
import { Canvas, useFrame } from "@react-three/fiber";
3+
import { Mesh } from "three";
4+
5+
const Thing = () => {
6+
const ref = useRef<Mesh>(null);
7+
8+
useFrame(() => {
9+
if (ref.current === null) return;
10+
ref.current.rotation.z += 0.01;
11+
});
12+
13+
return (
14+
<mesh
15+
ref={ref}
16+
onClick={() => console.log("click")}
17+
onPointerOver={() => console.log("hover")}
18+
onPointerOut={() => console.log("unhover")}
19+
>
20+
<planeBufferGeometry attach="geometry" args={[1, 1]} />
21+
<meshBasicMaterial
22+
attach="material"
23+
color="hotpink"
24+
opacity={0.5}
25+
transparent
26+
/>
27+
</mesh>
28+
);
29+
};
30+
31+
export const Example = () => {
32+
return (
33+
<Canvas>
34+
<Thing />
35+
</Canvas>
36+
);
37+
};

‎yarn.lock

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -925,6 +925,22 @@
925925
prop-types "^15.7.2"
926926
tslib "^2.1.0"
927927

928+
"@react-three/fiber@^7.0.7":
929+
version "7.0.7"
930+
resolved "https://registry.yarnpkg.com/@react-three/fiber/-/fiber-7.0.7.tgz#32a3fc43871890d03ce55fd08db064e4c7af308a"
931+
integrity sha512-cDRweUmJUbyGSn1j0r3bzKdS+MobIA93LR0j3pa2XOpjutKJsS2va38xEbbGK7ODTKVvCOdjJ9xlBB4TSS1Vhg==
932+
dependencies:
933+
"@babel/runtime" "^7.13.10"
934+
react-merge-refs "^1.1.0"
935+
react-reconciler "^0.26.2"
936+
react-three-fiber "0.0.0-deprecated"
937+
react-use-measure "^2.0.4"
938+
resize-observer-polyfill "^1.5.1"
939+
scheduler "^0.20.2"
940+
use-asset "^1.0.4"
941+
utility-types "^3.10.0"
942+
zustand "^3.5.1"
943+
928944
"@rushstack/eslint-patch@^1.0.6":
929945
version "1.0.7"
930946
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.7.tgz#82f83dcc2eb9b1e1d559b3aca96783e285eb8592"
@@ -981,6 +997,11 @@
981997
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
982998
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
983999

1000+
"@types/three@^0.132.1":
1001+
version "0.132.1"
1002+
resolved "https://registry.yarnpkg.com/@types/three/-/three-0.132.1.tgz#16e0889fdbd41259c2fdf18ff2444baa0afc8e57"
1003+
integrity sha512-d+eB9/zaK7Bo690EmWCrMwutNWiMYGnW+G5cRO4jvRHvKhI/fe2B2d6xHf1MW0yl+nQ0ij+ctezYGePWtVhAAA==
1004+
9841005
"@types/warning@^3.0.0":
9851006
version "3.0.0"
9861007
resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
@@ -1642,6 +1663,11 @@ [email protected]:
16421663
resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
16431664
integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
16441665

1666+
debounce@^1.2.0:
1667+
version "1.2.1"
1668+
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
1669+
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
1670+
16451671
debug@2, debug@^2.6.9:
16461672
version "2.6.9"
16471673
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:
34773503
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
34783504
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
34793505

3506+
react-merge-refs@^1.1.0:
3507+
version "1.1.0"
3508+
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
3509+
integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
3510+
3511+
react-reconciler@^0.26.2:
3512+
version "0.26.2"
3513+
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.2.tgz#bbad0e2d1309423f76cf3c3309ac6c96e05e9d91"
3514+
integrity sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==
3515+
dependencies:
3516+
loose-envify "^1.1.0"
3517+
object-assign "^4.1.1"
3518+
scheduler "^0.20.2"
3519+
34803520
[email protected]:
34813521
version "0.8.3"
34823522
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -3510,6 +3550,18 @@ react-style-singleton@^2.1.0:
35103550
invariant "^2.2.4"
35113551
tslib "^1.0.0"
35123552

3553+
[email protected]:
3554+
version "0.0.0-deprecated"
3555+
resolved "https://registry.yarnpkg.com/react-three-fiber/-/react-three-fiber-0.0.0-deprecated.tgz#c737242487d824cf9520307308b7e4c4071a278f"
3556+
integrity sha512-EblIqTAsIpkYeM8bZtC4lcpTE0A2zCEGipFB52RgcQq/q+0oryrk7Sxt+sqhIjUu6xMNEVywV8dr74lz5yWO6A==
3557+
3558+
react-use-measure@^2.0.4:
3559+
version "2.0.4"
3560+
resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.4.tgz#cb675b36eaeaf3681b94d5f5e08b2a1e081fedc9"
3561+
integrity sha512-7K2HIGaPMl3Q9ZQiEVjen3tRXl4UDda8LiTPy/QxP8dP2rl5gPBhf7mMH6MVjjRNv3loU7sNzey/ycPNnHVTxQ==
3562+
dependencies:
3563+
debounce "^1.2.0"
3564+
35133565
[email protected]:
35143566
version "17.0.2"
35153567
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -3587,6 +3639,11 @@ require-from-string@^2.0.2:
35873639
resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
35883640
integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
35893641

3642+
resize-observer-polyfill@^1.5.1:
3643+
version "1.5.1"
3644+
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
3645+
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
3646+
35903647
resolve-from@^4.0.0:
35913648
version "4.0.0"
35923649
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -3999,6 +4056,11 @@ text-table@^0.2.0:
39994056
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
40004057
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
40014058

4059+
three@^0.132.2:
4060+
version "0.132.2"
4061+
resolved "https://registry.yarnpkg.com/three/-/three-0.132.2.tgz#95eb1856147237c03e887cbbe56f964b6fb40b5e"
4062+
integrity sha512-0wcR7LxxkXMn6Gi58gEs3QvY8WpTVXA31L2VOvpjm4ZPYFRHCZC13UqynheFoS5OXDYgtBneN0dhbaNBE8iLhQ==
4063+
40024064
[email protected], timers-browserify@^2.0.4:
40034065
version "2.0.12"
40044066
resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
@@ -4139,6 +4201,13 @@ url@^0.11.0:
41394201
punycode "1.3.2"
41404202
querystring "0.2.0"
41414203

4204+
use-asset@^1.0.4:
4205+
version "1.0.4"
4206+
resolved "https://registry.yarnpkg.com/use-asset/-/use-asset-1.0.4.tgz#506caafc29f602890593799e58b577b70293a6e2"
4207+
integrity sha512-7/hqDrWa0iMnCoET9W1T07EmD4Eg/Wmoj/X8TGBc++ECRK4m5yTsjP4O6s0yagbxfqIOuUkIxe2/sA+VR2GxZA==
4208+
dependencies:
4209+
fast-deep-equal "^3.1.3"
4210+
41424211
use-callback-ref@^1.2.1, use-callback-ref@^1.2.3:
41434212
version "1.2.5"
41444213
resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
@@ -4190,6 +4259,11 @@ util@^0.11.0:
41904259
dependencies:
41914260
inherits "2.0.3"
41924261

4262+
utility-types@^3.10.0:
4263+
version "3.10.0"
4264+
resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
4265+
integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
4266+
41934267
v8-compile-cache@^2.0.3:
41944268
version "2.3.0"
41954269
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:
42964370
version "0.1.0"
42974371
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
42984372
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
4373+
4374+
zustand@^3.5.1:
4375+
version "3.5.11"
4376+
resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.11.tgz#3a8fd24f7a63d02a6532ab230accc2108051d635"
4377+
integrity sha512-V3Ys0ik2flOnWr0h9D4ZTCdcpK4feg71vLWaxjw+D+PLxM0+6KITdLedgDa97yAS6YDQTBD0Gw+NbsdAiMCqfA==

0 commit comments

Comments
 (0)