Update index.html

index.html

@@ -36,16 +36,12 @@
 
     <!-- Three.js ライブラリ -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <!-- 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');
-        let scene, camera, renderer, controls;
+        let scene, camera, renderer;
         const cubeSize = 5; // 立方体のサイズ
         let cubes = []; // 立方体を格納する配列
-        let cameraSpeed = 5; // カメラの移動速度
 
         function processImage() {
             const fileInput = document.getElementById('imageInput');
@@ -74,11 +70,6 @@
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true; // スムーズな操作
-            controls.dampingFactor = 0.25;
-            controls.screenSpacePanning = false;
-
             createCubesFromImage();
 
             animate(); // アニメーション開始
@@ -93,16 +84,17 @@
                     const r = imageData[index];
                     const g = imageData[index + 1];
                     const b = imageData[index + 2];
-                    const color = new THREE.Color(`rgb(${r},${g},${b})`);
+                    const color = new THREE.Color(rgb(${r},${g},${b}));
 
                     const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
                     const material = new THREE.MeshBasicMaterial({ color: color });
                     const cube = new THREE.Mesh(geometry, material);
 
+                    // x座標はそのままに、y座標のみ反転させる
                     cube.position.set(
-                        (x - canvas.width / 2) * cubeSize * 1.2,
-                        (canvas.height / 2 - y) * cubeSize * 1.2,
-                        Math.random() * 200 - 100
+                        (x - canvas.width / 2) * cubeSize * 1.2,  // x座標をそのまま使用
+                        (canvas.height / 2 - y) * cubeSize * 1.2, // y座標を反転
+                        Math.random() * 200 - 100                 // 初期位置のばらつきを与える
                     );
                     scene.add(cube);
                     cubes.push(cube);
@@ -124,28 +116,8 @@
                 cube.position.z += (targetZ - cube.position.z) * 0.05;
             });
 
-            controls.update(); // OrbitControls の更新
-
             renderer.render(scene, camera);
         }
-
-        // カメラ移動処理
-        document.addEventListener('keydown', (event) => {
-            switch (event.key) {
-                case 'w': // 前進
-                    camera.position.z -= cameraSpeed;
-                    break;
-                case 's': // 後退
-                    camera.position.z += cameraSpeed;
-                    break;
-                case 'a': // 左
-                    camera.position.x -= cameraSpeed;
-                    break;
-                case 'd': // 右
-                    camera.position.x += cameraSpeed;
-                    break;
-            }
-        });
     </script>
 </body>
-</html>
+</html>