Update index.html

index.html

@@ -31,6 +31,7 @@
         <input type="file" id="imageInput" accept="image/*">
         <button type="button" onclick="processImage()">画像を処理</button>
     </form>
+    <button id="replayButton" style="margin-top: 10px; display: none;" onclick="replayAnimation()">もう一度再生</button>
     <canvas id="canvas" style="display: none;"></canvas>
     <div id="scene-container"></div>
 
@@ -40,8 +41,9 @@
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
         let scene, camera, renderer;
-        const cubeSize = 8; // 立方体のサイズ
-        let cubes = []; // 立方体を格納する配列
+        const cubeSize = 8;
+        let cubes = [];
+        let animationFrameId;
 
         function processImage() {
             const fileInput = document.getElementById('imageInput');
@@ -50,31 +52,38 @@
 
             const img = new Image();
             img.onload = () => {
-                const scale = 0.1; // モザイクの縮小スケール
+                const scale = 0.1;
                 canvas.width = img.width * scale;
                 canvas.height = img.height * scale;
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
                 create3DScene();
+                document.getElementById('replayButton').style.display = 'block';
             };
             img.src = URL.createObjectURL(file);
         }
 
         function create3DScene() {
+            if (renderer) {
+                // 既存のシーンをクリア
+                cancelAnimationFrame(animationFrameId);
+                cubes.forEach(cube => scene.remove(cube));
+                cubes = [];
+                renderer.dispose();
+            }
+
             // Three.jsの基本設定
             scene = new THREE.Scene();
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.z = 300;
-            camera.position.x = 300;
-            camera.position.y = 300;
+            camera.position.set(300, 300, 300);
             camera.lookAt(new THREE.Vector3(0, 0, 0));
             renderer = new THREE.WebGLRenderer();
             renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('scene-container').innerHTML = ''; // 既存のcanvasを削除
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
             createCubesFromImage();
-
-            animate(); // アニメーション開始
+            animate();
         }
 
         function createCubesFromImage() {
@@ -92,11 +101,10 @@
                     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,  // x座標をそのまま使用
-                        (canvas.height / 2 - y) * cubeSize * 1.2, // y座標を反転
-                        Math.random() * 2200 - 100                 // 初期位置のばらつきを与える
+                        (x - canvas.width / 2) * cubeSize * 1.2,
+                        (canvas.height / 2 - y) * cubeSize * 1.2,
+                        Math.random() * 2200 - 100
                     );
                     scene.add(cube);
                     cubes.push(cube);
@@ -105,9 +113,8 @@
         }
 
         function animate() {
-            requestAnimationFrame(animate);
+            animationFrameId = requestAnimationFrame(animate);
 
-            // 各立方体をターゲット位置へ移動させる
             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;
@@ -120,6 +127,11 @@
 
             renderer.render(scene, camera);
         }
+
+        function replayAnimation() {
+            // アニメーションの再生をリセット
+            create3DScene();
+        }
     </script>
 </body>
-</html>
+</html>