Spaces:

soiz
/

3d-cube

Running

App Files Files Community

soiz commited on Nov 7, 2024

Commit

e3bf736

verified ·

1 Parent(s): a13f8e3

Update index.html

Browse files

Files changed (1) hide show

index.html +115 -97

index.html CHANGED Viewed

@@ -1,104 +1,122 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>モザイク画像の3D変換</title>
-  <style>
-    body { margin: 0; overflow: hidden; }
-    canvas { display: block; }
-    #upload { position: fixed; top: 10px; left: 10px; z-index: 10; }
-  </style>
 </head>
 <body>
-  <input type="file" id="upload" accept="image/*" />
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-  <script>
-    // 基本的なThree.jsのセットアップ
-    let scene, camera, renderer, controls;
-    const cubes = [];
-    const pixelSize = 5;  // ピクセル1つあたりの立方体サイズ
-    function init() {
-      scene = new THREE.Scene();
-      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-      camera.position.z = 300;
-      renderer = new THREE.WebGLRenderer();
-      renderer.setSize(window.innerWidth, window.innerHeight);
-      document.body.appendChild(renderer.domElement);
-      animate();
-    }
-    function animate() {
-      requestAnimationFrame(animate);
-      cubes.forEach(cube => {
-        // 各立方体が中心に集まるように位置を調整
-        cube.position.x += (0 - cube.position.x) * 0.02;
-        cube.position.y += (0 - cube.position.y) * 0.02;
-        cube.position.z += (0 - cube.position.z) * 0.02;
-      });
-      camera.rotation.y += 0.01;  // カメラの回転
-      renderer.render(scene, camera);
-    }
-    // モザイク画像を生成する関数
-    function createMosaicImage(image) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const width = 50;  // モザイクの幅
-      const height = 50; // モザイクの高さ
-      canvas.width = width;
-      canvas.height = height;
-      // 画像を縮小してモザイク化
-      ctx.drawImage(image, 0, 0, width, height);
-      const imageData = ctx.getImageData(0, 0, width, height).data;
-      // 各ピクセルから立方体を作成
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const i = (y * width + x) * 4;
-          const r = imageData[i];
-          const g = imageData[i + 1];
-          const b = imageData[i + 2];
-          const color = new THREE.Color(`rgb(${r},${g},${b})`);
-          const geometry = new THREE.BoxGeometry(pixelSize, pixelSize, pixelSize);
-          const material = new THREE.MeshBasicMaterial({ color });
-          const cube = new THREE.Mesh(geometry, material);
-          // 初期位置をランダムに設定
-          cube.position.x = Math.random() * 600 - 300;
-          cube.position.y = Math.random() * 600 - 300;
-          cube.position.z = Math.random() * 600 - 300;
-          // 各ピクセルの位置に立方体を配置
-          const targetX = (x - width / 2) * pixelSize;
-          const targetY = (y - height / 2) * pixelSize;
-          cube.userData = { targetX, targetY, targetZ: 0 };
-          cubes.push(cube);
-          scene.add(cube);
         }
-      }
-    }
-    // ファイル選択時のイベントリスナー
-    document.getElementById("upload").addEventListener("change", (event) => {
-      const file = event.target.files[0];
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const image = new Image();
-        image.onload = () => createMosaicImage(image);
-        image.src = e.target.result;
-      };
-      reader.readAsDataURL(file);
-    });
-    // 初期化
-    init();
-  </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="ja">
 <head>
+    <meta charset="UTF-8">
+    <title>画像モザイク＆3Dアニメーション</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #222;
+            color: #fff;
+            font-family: Arial, sans-serif;
+        }
+        canvas {
+            display: block;
+            margin-top: 20px;
+        }
+        #scene-container {
+            width: 80vw;
+            height: 80vh;
+        }
+        #uploadForm {
+            margin-top: 20px;
+        }
+    </style>
 </head>
 <body>
+    <h1>画像のモザイク処理と3Dアニメーション</h1>
+    <form id="uploadForm">
+        <input type="file" id="imageInput" accept="image/*">
+        <button type="button" onclick="processImage()">画像を処理</button>
+    </form>
+    <canvas id="canvas" style="display: none;"></canvas>
+    <div id="scene-container"></div>
+    <!-- Three.js ライブラリ -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        let scene, camera, renderer;
+        const cubeSize = 5; // 立方体のサイズ
+        let cubes = []; // 立方体を格納する配列
+        function processImage() {
+            const fileInput = document.getElementById('imageInput');
+            const file = fileInput.files[0];
+            if (!file) return;
+            const img = new Image();
+            img.onload = () => {
+                const scale = 0.1; // モザイクの縮小スケール
+                canvas.width = img.width * scale;
+                canvas.height = img.height * scale;
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                create3DScene();
+            };
+            img.src = URL.createObjectURL(file);
+        }
+        function create3DScene() {
+            // Three.jsの基本設定
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 300;
+            renderer = new THREE.WebGLRenderer();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('scene-container').appendChild(renderer.domElement);
+            createCubesFromImage();
+            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 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,
+                        (y - canvas.height / 2) * cubeSize * 1.2,
+                        Math.random() * 200 - 100 // 初期位置のばらつきを与える
+                    );
+                    scene.add(cube);
+                    cubes.push(cube);
+                }
+            }
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            // 各立方体をターゲット位置へ移動させる
+            cubes.forEach((cube, index) => {
+                const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2;
+                const targetY = (Math.floor(index / canvas.width) - canvas.height / 2) * cubeSize * 1.2;
+                const targetZ = 0;
+                cube.position.x += (targetX - cube.position.x) * 0.05;
+                cube.position.y += (targetY - cube.position.y) * 0.05;
+                cube.position.z += (targetZ - cube.position.z) * 0.05;
+            });
+            renderer.render(scene, camera);
         }
+    </script>
 </body>
+</html>