mirror of
https://github.com/kou029w/pucchinglgl.git
synced 2025-01-18 08:15:02 +00:00
feat: create pucchinglgl
This commit is contained in:
parent
aae222df22
commit
21dfc3c19a
10 changed files with 2021 additions and 0 deletions
34
.github/workflows/github-pages.yml
vendored
Normal file
34
.github/workflows/github-pages.yml
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
name: github-pages
|
||||
on:
|
||||
push:
|
||||
branches: [master]
|
||||
jobs:
|
||||
main:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: git config
|
||||
run: |
|
||||
git config user.name bot
|
||||
git config user.email bot@example
|
||||
- run: git subtree add -P build origin gh-pages
|
||||
- id: yarn_cache
|
||||
run: echo "::set-output name=dir::$(yarn cache dir)"
|
||||
- uses: actions/cache@v2
|
||||
with:
|
||||
path: ${{ steps.yarn_cache.outputs.dir }}
|
||||
key: yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: yarn-
|
||||
- run: yarn
|
||||
- name: build
|
||||
run: |
|
||||
yarn build
|
||||
touch build/.nojekyll
|
||||
- id: git_status
|
||||
run: echo "::set-output name=mod::$(git status --porcelain)"
|
||||
- name: deploy
|
||||
if: steps.git_status.outputs.mod != ''
|
||||
run: |
|
||||
git add -f build
|
||||
git commit -m github-pages
|
||||
git subtree push -P build origin gh-pages
|
||||
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/node_modules/
|
||||
17
package.json
Normal file
17
package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "pucchinglgl",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "build/main.js",
|
||||
"repository": "git@github.com:kou029w/pucchinglgl.git",
|
||||
"author": "Kohei Watanabe <kou029w@gmail.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"snowpack": "^2.18.5",
|
||||
"three": "^0.124.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "snowpack dev",
|
||||
"build": "snowpack build"
|
||||
}
|
||||
}
|
||||
8
renovate.json
Normal file
8
renovate.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"extends": [
|
||||
"config:base",
|
||||
":preserveSemverRanges",
|
||||
":maintainLockFilesWeekly"
|
||||
],
|
||||
"automerge": true
|
||||
}
|
||||
13
snowpack.config.json
Normal file
13
snowpack.config.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"buildOptions": {
|
||||
"clean": true
|
||||
},
|
||||
"mount": { "src": { "url": "/" } },
|
||||
"experiments": {
|
||||
"optimize": {
|
||||
"bundle": true,
|
||||
"minify": true,
|
||||
"target": "esnext"
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/index.html
Normal file
15
src/index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>ぷっちんぐるぐる</title>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" href="data:," />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script type="module" src="main.js"></script>
|
||||
</head>
|
||||
</html>
|
||||
163
src/main.ts
Normal file
163
src/main.ts
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import {
|
||||
Color,
|
||||
Mesh,
|
||||
MeshBasicMaterial,
|
||||
PerspectiveCamera,
|
||||
PlaneGeometry,
|
||||
Raycaster,
|
||||
Scene,
|
||||
Vector2,
|
||||
WebGLRenderer,
|
||||
} from "three";
|
||||
import randomInt from "./randomInt";
|
||||
|
||||
const root = document.body;
|
||||
const scene = new Scene();
|
||||
const camera = new PerspectiveCamera();
|
||||
const grid = { colum: 14, row: 4 } as const;
|
||||
const mouse = new Vector2(NaN, NaN);
|
||||
const panels = Array.from({ length: grid.colum * grid.row }, () => {
|
||||
const geometry = new PlaneGeometry();
|
||||
const material = new MeshBasicMaterial({
|
||||
color: new Color("white"),
|
||||
transparent: true,
|
||||
});
|
||||
const mesh = new Mesh(geometry, material);
|
||||
return mesh;
|
||||
});
|
||||
const renderer = new WebGLRenderer();
|
||||
const canvas = renderer.domElement;
|
||||
const raycaster = new Raycaster();
|
||||
|
||||
function drawRect() {
|
||||
initPanels(panels);
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const [intersect] = raycaster.intersectObjects(panels);
|
||||
if (!intersect) return;
|
||||
|
||||
(intersect.object as Mesh<
|
||||
PlaneGeometry,
|
||||
MeshBasicMaterial
|
||||
>).material.opacity = 0.25;
|
||||
const c16s = ["red", "green", "blue", "cyan", "magenta", "yellow"];
|
||||
const c16 = c16s[randomInt(c16s.length - 1)];
|
||||
const color = new Color(c16);
|
||||
const geometry = new PlaneGeometry(1, 1);
|
||||
const material = new MeshBasicMaterial({
|
||||
color,
|
||||
});
|
||||
const mesh = new Mesh(geometry, material);
|
||||
mesh.scale.set(0.1, 0.1, 1);
|
||||
Object.assign(mesh.position, intersect.point);
|
||||
scene.add(mesh);
|
||||
}
|
||||
|
||||
function initPanels(panels: Mesh<PlaneGeometry, MeshBasicMaterial>[]) {
|
||||
const width = camera.aspect / grid.colum;
|
||||
const height = 1 / grid.row;
|
||||
for (const [i, panel] of panels.entries()) {
|
||||
panel.material.opacity = 0;
|
||||
panel.scale.set(width, height, 1);
|
||||
Object.assign(panel.position, {
|
||||
x: width * ((i % grid.colum) - (grid.colum - 1) / 2),
|
||||
y: height * (-Math.floor(i / grid.colum) + (grid.row - 1) / 2),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const layouts = {
|
||||
default: [
|
||||
`\` 1 2 3 4 5 6 7 8 9 0 - = Backspace`,
|
||||
`Tab q w e r t y u i o p [ ] \\`,
|
||||
`CapsLock a s d f g h j k l ; ' Enter`,
|
||||
`Shift z x c v b n m , . /`,
|
||||
],
|
||||
shift: [
|
||||
`~ ! @ # $ % ^ & * ( ) _ + Backspace`,
|
||||
`Tab Q W E R T Y U I O P { } |`,
|
||||
`CapsLock A S D F G H J K L : " Enter`,
|
||||
`Shift Z X C V B N M < > ?`,
|
||||
],
|
||||
} as const;
|
||||
|
||||
function position(
|
||||
layout: readonly string[],
|
||||
key: string
|
||||
): [number, number] | [] {
|
||||
const [x, y] = layout
|
||||
.map((row) => row.split(" ").indexOf(key))
|
||||
.flatMap((x, y) => (x >= 0 ? [x, y] : []));
|
||||
|
||||
return x >= 0 ? [x, y] : [];
|
||||
}
|
||||
|
||||
function handleKeydown({ key }: KeyboardEvent) {
|
||||
if (key === " ") {
|
||||
scene.clear();
|
||||
setup();
|
||||
return;
|
||||
}
|
||||
|
||||
const [x = randomInt(grid.colum - 1), y = randomInt(grid.row - 1)] = [
|
||||
...position(layouts.default, key),
|
||||
...position(layouts.shift, key),
|
||||
];
|
||||
|
||||
const offset = () => Math.random() - 0.5;
|
||||
mouse.x = ((x + offset()) / (grid.colum - 1)) * 2 - 1;
|
||||
mouse.y = -((y + offset()) / (grid.row - 1)) * 2 + 1;
|
||||
|
||||
drawRect();
|
||||
}
|
||||
|
||||
function handleMouseMove(event: { clientX: number; clientY: number }) {
|
||||
mouse.x = (event.clientX / canvas.clientWidth) * 2 - 1;
|
||||
mouse.y = -(event.clientY / canvas.clientHeight) * 2 + 1;
|
||||
|
||||
drawRect();
|
||||
}
|
||||
|
||||
function handleTouchmove(event: TouchEvent) {
|
||||
[...event.touches].map(handleMouseMove);
|
||||
}
|
||||
|
||||
function handleMouseMoveEnd() {
|
||||
mouse.set(NaN, NaN);
|
||||
}
|
||||
|
||||
function setup() {
|
||||
scene.background = new Color();
|
||||
initPanels(panels);
|
||||
scene.add(...panels);
|
||||
camera.position.z = 1;
|
||||
root.addEventListener("keydown", handleKeydown);
|
||||
root.addEventListener("touchmove", handleTouchmove);
|
||||
root.addEventListener("keyup", handleMouseMoveEnd);
|
||||
root.addEventListener("touchend", handleMouseMoveEnd);
|
||||
root.addEventListener("mousedown", () => {
|
||||
root.addEventListener("mousemove", handleMouseMove);
|
||||
});
|
||||
for (const event of ["mouseup", "mouseleave"] as const) {
|
||||
root.addEventListener(event, () => {
|
||||
root.removeEventListener("mousemove", handleMouseMove);
|
||||
handleMouseMoveEnd();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function tick() {
|
||||
window.requestAnimationFrame(tick);
|
||||
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function main() {
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
Object.assign(canvas.style, { width: "100vw", height: "100vh" });
|
||||
root.appendChild(canvas);
|
||||
setup();
|
||||
tick();
|
||||
}
|
||||
|
||||
main();
|
||||
8
src/randomInt.ts
Normal file
8
src/randomInt.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
const { floor, random } = Math;
|
||||
|
||||
/** 範囲 [0, high] のランダムな整数を返します */
|
||||
function randomInt(high: number) {
|
||||
return floor(random() * (high + 1));
|
||||
}
|
||||
|
||||
export default randomInt;
|
||||
1
tsconfig.json
Normal file
1
tsconfig.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{ "compilerOptions": { "target": "esnext", "moduleResolution": "node" } }
|
||||
Loading…
Add table
Reference in a new issue