Update index.html

index.html

@@ -95,23 +95,29 @@
                     const r = imageData[index];
                     const g = imageData[index + 1];
                     const b = imageData[index + 2];
-                    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);
+                    const alpha = imageData[index + 3] / 255; // Alpha channel (0-1)
+
+                    if (alpha < 0.1) {
+                        // Skip creating a cube if the alpha is near 0 (transparent)
+                        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,
+                        transparent: true,
+                        opacity: alpha // Set opacity based on alpha value
+                    });
+                    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);
                 }
             }
         }