Update index.html

index.html

@@ -36,10 +36,11 @@
 
     <!-- Three.js ライブラリ -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
     <script>
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
-        let scene, camera, renderer;
+        let scene, camera, renderer, controls;
         const cubeSize = 5; // 立方体のサイズ
         let cubes = []; // 立方体を格納する配列
 
@@ -70,6 +71,8 @@
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
+            controls = new THREE.OrbitControls(camera, renderer.domElement);  // カメラの操作を追加
+
             createCubesFromImage();
 
             animate(); // アニメーション開始
@@ -116,8 +119,29 @@
                 cube.position.z += (targetZ - cube.position.z) * 0.05;
             });
 
+            controls.update(); // OrbitControlsを更新
             renderer.render(scene, camera);
         }
+
+        // WASDキーでカメラを移動する処理
+        window.addEventListener('keydown', function (event) {
+            const moveSpeed = 10;
+            switch (event.key) {
+                case 'w': // 上に移動
+                    camera.position.y += moveSpeed;
+                    break;
+                case 's': // 下に移動
+                    camera.position.y -= moveSpeed;
+                    break;
+                case 'a': // 左に移動
+                    camera.position.x -= moveSpeed;
+                    break;
+                case 'd': // 右に移動
+                    camera.position.x += moveSpeed;
+                    break;
+            }
+        });
+
     </script>
 </body>
 </html>