feat: パフォーマンスの改善

src/main.ts

@@ -20,10 +20,7 @@ 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 material = new MeshBasicMaterial({ opacity: 0 });
   const mesh = new Mesh(geometry, material);
   return mesh;
 });
@@ -31,48 +28,29 @@ const renderer = new WebGLRenderer();
 const canvas = renderer.domElement;
 const raycaster = new Raycaster();
 
+function render() {
+  renderer.render(scene, camera);
+}
+
 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 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),
-    });
-  }
+  render();
 }
 
 function handleKeydown({ key }: KeyboardEvent) {
-  if (key === " ") {
-    scene.clear();
-    setup();
-    return;
-  }
+  if (key === " ") return setup();
 
   const [x = randomInt(grid.colum - 1), y = randomInt(grid.row - 1)] = [
     ...keyPosition(keyLayouts.default, key),
@@ -101,11 +79,36 @@ function handleMouseMoveEnd() {
   mouse.set(NaN, NaN);
 }
 
+function adjustPanelSize() {
+  const width = camera.aspect / grid.colum;
+  const height = 1 / grid.row;
+  for (const [i, panel] of panels.entries()) {
+    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),
+    });
+  }
+}
+
+function adjustCanvasSize() {
+  camera.aspect = canvas.clientWidth / canvas.clientHeight;
+  camera.updateProjectionMatrix();
+  adjustPanelSize();
+  render();
+}
+
 function setup() {
   scene.background = new Color();
-  initPanels(panels);
+  scene.clear();
   scene.add(...panels);
   camera.position.z = 1;
+  adjustCanvasSize();
+}
+
+function main() {
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  Object.assign(canvas.style, { width: "100vw", height: "100vh" });
   root.addEventListener("keydown", handleKeydown);
   root.addEventListener("touchmove", handleTouchmove);
   root.addEventListener("keyup", handleMouseMoveEnd);
@@ -119,21 +122,9 @@ function setup() {
       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);
+  window.addEventListener("resize", adjustCanvasSize);
   setup();
-  tick();
 }
 
 main();