Update index.html

index.html

@@ -36,7 +36,9 @@
 
     <!-- Three.js ライブラリ -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <!-- OrbitControls.js ライブラリ -->
     <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');
@@ -44,6 +46,10 @@
         const cubeSize = 5; // 立方体のサイズ
         let cubes = []; // 立方体を格納する配列
 
+        // カメラ移動の速度
+        const moveSpeed = 0.5;
+        const rotateSpeed = 0.05;
+
         function processImage() {
             const fileInput = document.getElementById('imageInput');
             const file = fileInput.files[0];
@@ -65,13 +71,16 @@
             // Three.jsの基本設定
             scene = new THREE.Scene();
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.z = 300;
+            camera.position.set(0, 0, 300);
 
             renderer = new THREE.WebGLRenderer();
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
-            controls = new THREE.OrbitControls(camera, renderer.domElement);  // カメラの操作を追加
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.25;
+            controls.screenSpacePanning = false;
 
             createCubesFromImage();
 
@@ -108,7 +117,12 @@
         function animate() {
             requestAnimationFrame(animate);
 
-            // 各立方体をターゲット位置へ移動させる
+            // カメラ移動
+            handleKeyboardInput();
+
+            controls.update(); // OrbitControlsの更新
+
+            // 立方体のアニメーション
             cubes.forEach((cube, index) => {
                 const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2;
                 const targetY = ((canvas.height / 2) - Math.floor(index / canvas.width)) * cubeSize * 1.2;
@@ -119,29 +133,46 @@
                 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;
+        function handleKeyboardInput() {
+            const cameraDirection = new THREE.Vector3();
+            camera.getWorldDirection(cameraDirection);
+
+            if (keyboard.w) {
+                camera.position.add(cameraDirection.multiplyScalar(moveSpeed));
+            }
+            if (keyboard.s) {
+                camera.position.sub(cameraDirection.multiplyScalar(moveSpeed));
             }
+            if (keyboard.a) {
+                const left = new THREE.Vector3();
+                left.crossVectors(cameraDirection, camera.up).normalize();
+                camera.position.add(left.multiplyScalar(moveSpeed));
+            }
+            if (keyboard.d) {
+                const right = new THREE.Vector3();
+                right.crossVectors(cameraDirection, camera.up).normalize();
+                camera.position.sub(right.multiplyScalar(moveSpeed));
+            }
+        }
+
+        const keyboard = { w: false, a: false, s: false, d: false };
+
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'w') keyboard.w = true;
+            if (event.key === 'a') keyboard.a = true;
+            if (event.key === 's') keyboard.s = true;
+            if (event.key === 'd') keyboard.d = true;
         });
 
+        window.addEventListener('keyup', (event) => {
+            if (event.key === 'w') keyboard.w = false;
+            if (event.key === 'a') keyboard.a = false;
+            if (event.key === 's') keyboard.s = false;
+            if (event.key === 'd') keyboard.d = false;
+        });
     </script>
 </body>
 </html>