Update index.html

index.html

@@ -90,9 +90,9 @@
                     const material = new THREE.MeshBasicMaterial({ color: color });
                     const cube = new THREE.Mesh(geometry, material);
 
-                    // xとyの座標を反転させる
+                    // x座標はそのままに、y座標のみ反転させる
                     cube.position.set(
-                        (canvas.width / 2 - x) * cubeSize * 1.2,  // x座標を反転
+                        (x - canvas.width / 2) * cubeSize * 1.2,  // x座標をそのまま使用
                         (canvas.height / 2 - y) * cubeSize * 1.2, // y座標を反転
                         Math.random() * 200 - 100                 // 初期位置のばらつきを与える
                     );
@@ -107,7 +107,7 @@
 
             // 各立方体をターゲット位置へ移動させる
             cubes.forEach((cube, index) => {
-                const targetX = ((canvas.width / 2) - (index % canvas.width)) * cubeSize * 1.2;
+                const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2;
                 const targetY = ((canvas.height / 2) - Math.floor(index / canvas.width)) * cubeSize * 1.2;
                 const targetZ = 0;