Update index.html

index.html

@@ -65,19 +65,21 @@
 
         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.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 = '';
+            document.getElementById('scene-container').innerHTML = ''; // 既存のcanvasを削除
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
             createCubesFromImage();
@@ -93,23 +95,23 @@
                     const r = imageData[index];
                     const g = imageData[index + 1];
                     const b = imageData[index + 2];
-                    const a = imageData[index + 3]; // アルファチャンネルの値
-
-                    // 透明ピクセル（a=0）をスキップ
-                    if (a === 0) continue;
-
-                    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);
-
-                    cube.position.set(
-                        (x - canvas.width / 2) * cubeSize * 1.2,
-                        (canvas.height / 2 - y) * cubeSize * 1.2,
-                        Math.random() * 2200 - 100
-                    );
-                    scene.add(cube);
-                    cubes.push(cube);
+                    const a = imageData[index + 3];  // アルファチャネル（透明度）
+
+                    // アルファ値が0より大きい（透明でない）場合のみキューブを作成
+                    if (a > 0) {
+                        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);
+
+                        cube.position.set(
+                            (x - canvas.width / 2) * cubeSize * 1.2,
+                            (canvas.height / 2 - y) * cubeSize * 1.2,
+                            Math.random() * 2200 - 100
+                        );
+                        scene.add(cube);
+                        cubes.push(cube);
+                    }
                 }
             }
         }
@@ -131,6 +133,7 @@
         }
 
         function replayAnimation() {
+            // アニメーションの再生をリセット
             create3DScene();
         }
     </script>