Update index.html

index.html

@@ -90,10 +90,11 @@
                     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,
-                        (y - canvas.height / 2) * cubeSize * 1.2,
-                        Math.random() * 200 - 100 // 初期位置のばらつきを与える
+                        (canvas.width / 2 - x) * cubeSize * 1.2,  // x座標を反転
+                        (canvas.height / 2 - y) * cubeSize * 1.2, // y座標を反転
+                        Math.random() * 200 - 100                 // 初期位置のばらつきを与える
                     );
                     scene.add(cube);
                     cubes.push(cube);
@@ -106,8 +107,8 @@
 
             // 各立方体をターゲット位置へ移動させる
             cubes.forEach((cube, index) => {
-                const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2;
-                const targetY = (Math.floor(index / canvas.width) - canvas.height / 2) * cubeSize * 1.2;
+                const targetX = ((canvas.width / 2) - (index % canvas.width)) * cubeSize * 1.2;
+                const targetY = ((canvas.height / 2) - Math.floor(index / canvas.width)) * cubeSize * 1.2;
                 const targetZ = 0;
 
                 cube.position.x += (targetX - cube.position.x) * 0.05;
@@ -119,4 +120,4 @@
         }
     </script>
 </body>
-</html>
+</html>