Update index.html

index.html

@@ -86,41 +86,39 @@
             animate();
         }
 
-        function createCubesFromImage() {
-            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-
-            for (let y = 0; y < canvas.height; y++) {
-                for (let x = 0; x < canvas.width; x++) {
-                    const index = (y * canvas.width + x) * 4;
-                    const r = imageData[index];
-                    const g = imageData[index + 1];
-                    const b = imageData[index + 2];
-                    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);
-                }
-            }
+function createCubesFromImage() {
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+
+    for (let y = 0; y < canvas.height; y++) {
+        for (let x = 0; x < canvas.width; x++) {
+            const index = (y * canvas.width + x) * 4;
+            const r = imageData[index];
+            const g = imageData[index + 1];
+            const b = imageData[index + 2];
+            const a = imageData[index + 3]; // アルファ値を取得
+
+            // アルファ値が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,
+                transparent: true,
+                opacity: a / 255 // 透明度を設定（0で完全透明、255で不透明）
+            });
+
+            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);
         }
+    }
+}
+
 
         function animate() {
             animationFrameId = requestAnimationFrame(animate);