Spaces:

soiz
/

3d-cube

Running

App Files Files Community

soiz commited on Nov 7, 2024

Commit

363f653

verified ·

1 Parent(s): f0491e5

Update index.html

Browse files

Files changed (1) hide show

index.html +68 -35

index.html CHANGED Viewed

@@ -19,10 +19,20 @@
         #scene-container {
             width: 80vw;
             height: 80vh;
         }
         #uploadForm {
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
@@ -31,6 +41,20 @@
         <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>
@@ -75,8 +99,7 @@
             // Three.jsの基本設定
             scene = new THREE.Scene();
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(-100, -100, 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を削除
@@ -86,39 +109,37 @@
             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 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+Math.random() * 2200 - 100,
-                (canvas.height / 2 - y) * cubeSize * 1.2+Math.random() * 2200 - 100,
-                Math.random() * 2200 - 100
-            );
-            scene.add(cube);
-            cubes.push(cube);
         }
-    }
-}
         function animate() {
             animationFrameId = requestAnimationFrame(animate);
@@ -137,9 +158,21 @@ function createCubesFromImage() {
         }
         function replayAnimation() {
-            // アニメーションの再生をリセット
             create3DScene();
         }
     </script>
 </body>
 </html>

         #scene-container {
             width: 80vw;
             height: 80vh;
+            margin-top: 20px;
         }
         #uploadForm {
             margin-top: 20px;
         }
+        #settings {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #settings label {
+            margin: 5px;
+        }
     </style>
 </head>
 <body>
         <input type="file" id="imageInput" accept="image/*">
         <button type="button" onclick="processImage()">画像を処理</button>
     </form>
+    <div id="settings">
+        <label>
+            背景色: <input type="color" id="bgColorPicker" value="#222222" onchange="updateBackgroundColor()">
+        </label>
+        <label>
+            カメラ X: <input type="range" id="cameraX" min="-500" max="500" value="-100" oninput="updateCameraPosition()">
+        </label>
+        <label>
+            カメラ Y: <input type="range" id="cameraY" min="-500" max="500" value="-100" oninput="updateCameraPosition()">
+        </label>
+        <label>
+            カメラ Z: <input type="range" id="cameraZ" min="-1000" max="1000" value="300" oninput="updateCameraPosition()">
+        </label>
+    </div>
     <button id="replayButton" style="margin-top: 10px; display: none;" onclick="replayAnimation()">もう一度再生</button>
     <canvas id="canvas" style="display: none;"></canvas>
     <div id="scene-container"></div>
             // Three.jsの基本設定
             scene = new THREE.Scene();
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            updateCameraPosition(); // カメラ位置を初期設定
             renderer = new THREE.WebGLRenderer();
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.getElementById('scene-container').innerHTML = ''; // 既存のcanvasを削除
             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 a = imageData[index + 3];
+                    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
+                    });
+                    const cube = new THREE.Mesh(geometry, material);
+                    cube.position.set(
+                        (x - canvas.width / 2) * cubeSize * 1.2 + Math.random() * 2200 - 100,
+                        (canvas.height / 2 - y) * cubeSize * 1.2 + Math.random() * 2200 - 100,
+                        Math.random() * 2200 - 100
+                    );
+                    scene.add(cube);
+                    cubes.push(cube);
+                }
+            }
         }
         function animate() {
             animationFrameId = requestAnimationFrame(animate);
         }
         function replayAnimation() {
             create3DScene();
         }
+        function updateBackgroundColor() {
+            const color = document.getElementById('bgColorPicker').value;
+            document.body.style.backgroundColor = color;
+        }
+        function updateCameraPosition() {
+            const x = parseFloat(document.getElementById('cameraX').value);
+            const y = parseFloat(document.getElementById('cameraY').value);
+            const z = parseFloat(document.getElementById('cameraZ').value);
+            camera.position.set(x, y, z);
+            camera.lookAt(new THREE.Vector3(0, 0, 0));
+        }
     </script>
 </body>
 </html>