mirror of
https://github.com/kou029w/pucchinglgl.git
synced 2025-01-18 16:18:00 +00:00
feat: いろんな音を鳴らす
This commit is contained in:
parent
33bc465182
commit
87e6bd8670
1 changed files with 11 additions and 5 deletions
16
src/main.ts
16
src/main.ts
|
@ -9,7 +9,7 @@ import {
|
||||||
Vector2,
|
Vector2,
|
||||||
WebGLRenderer,
|
WebGLRenderer,
|
||||||
} from "three";
|
} from "three";
|
||||||
import { Synth } from "tone";
|
import { Oscillator } from "tone";
|
||||||
import randomInt from "./randomInt";
|
import randomInt from "./randomInt";
|
||||||
import keyPosition from "./keyPosition";
|
import keyPosition from "./keyPosition";
|
||||||
import keyLayouts from "./config/keyLayouts";
|
import keyLayouts from "./config/keyLayouts";
|
||||||
|
@ -20,16 +20,17 @@ const scene = new Scene();
|
||||||
const camera = new PerspectiveCamera();
|
const camera = new PerspectiveCamera();
|
||||||
const grid = { colum: 14, row: 4 } as const;
|
const grid = { colum: 14, row: 4 } as const;
|
||||||
const mouse = new Vector2(NaN, NaN);
|
const mouse = new Vector2(NaN, NaN);
|
||||||
const panels = Array.from({ length: grid.colum * grid.row }, () => {
|
const panels = Array.from({ length: grid.colum * grid.row }, (_, i) => {
|
||||||
const geometry = new PlaneGeometry();
|
const geometry = new PlaneGeometry();
|
||||||
const material = new MeshBasicMaterial({ opacity: 0 });
|
const material = new MeshBasicMaterial({ opacity: 0 });
|
||||||
const mesh = new Mesh(geometry, material);
|
const mesh = new Mesh(geometry, material);
|
||||||
|
const note = `${"CDEFGAB"[i % 7]}${Math.floor(i / 7)}`;
|
||||||
|
mesh.userData.osc = new Oscillator(note, "square").toDestination();
|
||||||
return mesh;
|
return mesh;
|
||||||
});
|
});
|
||||||
const renderer = new WebGLRenderer();
|
const renderer = new WebGLRenderer();
|
||||||
const canvas = renderer.domElement;
|
const canvas = renderer.domElement;
|
||||||
const raycaster = new Raycaster();
|
const raycaster = new Raycaster();
|
||||||
const synth = new Synth({ oscillator: { type: "square" } }).toDestination();
|
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
|
@ -39,6 +40,11 @@ function vibrate() {
|
||||||
if ("vibrate" in navigator) navigator.vibrate(100);
|
if ("vibrate" in navigator) navigator.vibrate(100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function tone(osc: Oscillator) {
|
||||||
|
osc.start();
|
||||||
|
osc.stop("+0.05");
|
||||||
|
}
|
||||||
|
|
||||||
function drawRect() {
|
function drawRect() {
|
||||||
raycaster.setFromCamera(mouse, camera);
|
raycaster.setFromCamera(mouse, camera);
|
||||||
const [intersect] = raycaster.intersectObjects(panels);
|
const [intersect] = raycaster.intersectObjects(panels);
|
||||||
|
@ -47,7 +53,7 @@ function drawRect() {
|
||||||
vibrate();
|
vibrate();
|
||||||
try {
|
try {
|
||||||
// FIXME: Error: Start time must be strictly greater than previous start time.
|
// FIXME: Error: Start time must be strictly greater than previous start time.
|
||||||
synth.triggerAttackRelease("C4", "16n");
|
tone(intersect.object.userData.osc);
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|
||||||
const color = pallet[randomInt(pallet.length - 1)];
|
const color = pallet[randomInt(pallet.length - 1)];
|
||||||
|
@ -102,7 +108,7 @@ function adjustPanelSize() {
|
||||||
panel.scale.set(width, height, 1);
|
panel.scale.set(width, height, 1);
|
||||||
Object.assign(panel.position, {
|
Object.assign(panel.position, {
|
||||||
x: width * ((i % grid.colum) - (grid.colum - 1) / 2),
|
x: width * ((i % grid.colum) - (grid.colum - 1) / 2),
|
||||||
y: height * (-Math.floor(i / grid.colum) + (grid.row - 1) / 2),
|
y: height * (Math.floor(i / grid.colum) - (grid.row - 1) / 2),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue