Update index.html

index.html

@@ -65,21 +65,19 @@
 
         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 = ''; // 既存のcanvasを削除
+            document.getElementById('scene-container').innerHTML = '';
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
             createCubesFromImage();
@@ -95,8 +93,12 @@
                     const r = imageData[index];
                     const g = imageData[index + 1];
                     const b = imageData[index + 2];
-                    const color = new THREE.Color(`rgb(${r},${g},${b})`);
+                    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);
@@ -129,7 +131,6 @@
         }
 
         function replayAnimation() {
-            // アニメーションの再生をリセット
             create3DScene();
         }
     </script>