Update index.html

index.html

@@ -36,9 +36,8 @@
 
     <!-- Three.js ライブラリ -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <!-- OrbitControls.js ライブラリ -->
+    <!-- OrbitControls ライブラリ -->
     <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');
@@ -46,9 +45,7 @@
         const cubeSize = 5; // 立方体のサイズ
         let cubes = []; // 立方体を格納する配列
 
-        // カメラ移動の速度
-        const moveSpeed = 0.5;
-        const rotateSpeed = 0.05;
+        let cameraSpeed = 5; // カメラ移動速度
 
         function processImage() {
             const fileInput = document.getElementById('imageInput');
@@ -71,16 +68,18 @@
             // Three.jsの基本設定
             scene = new THREE.Scene();
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 0, 300);
-
-            renderer = new THREE.WebGLRenderer();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            document.getElementById('scene-container').appendChild(renderer.domElement);
+            camera.position.set(0, 0, 300); // 最初のカメラ位置を設定
 
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            // OrbitControlsを使ってマウス操作で視点を回転できるようにする
+            controls = new THREE.OrbitControls(camera);
             controls.enableDamping = true;
             controls.dampingFactor = 0.25;
             controls.screenSpacePanning = false;
+            controls.maxPolarAngle = Math.PI / 2;
+
+            renderer = new THREE.WebGLRenderer();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('scene-container').appendChild(renderer.domElement);
 
             createCubesFromImage();
 
@@ -117,12 +116,10 @@
         function animate() {
             requestAnimationFrame(animate);
 
-            // カメラ移動
-            handleKeyboardInput();
-
-            controls.update(); // OrbitControlsの更新
+            // OrbitControlsの更新
+            controls.update();
 
-            // 立方体のアニメーション
+            // 各立方体をターゲット位置へ移動させる
             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;
@@ -136,43 +133,16 @@
             renderer.render(scene, camera);
         }
 
-        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));
-            }
+        // カメラの移動（WASDキー）
+        function moveCamera(event) {
+            const key = event.key.toLowerCase();
+            if (key === 'w') camera.position.z -= cameraSpeed;
+            if (key === 's') camera.position.z += cameraSpeed;
+            if (key === 'a') camera.position.x -= cameraSpeed;
+            if (key === 'd') camera.position.x += cameraSpeed;
         }
 
-        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;
-        });
+        window.addEventListener('keydown', moveCamera);
     </script>
 </body>
 </html>