| <!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; |
| margin: 0; |
| padding: 0; |
| |
| } |
| canvas { |
| display: block; |
| margin-top: 20px; |
| } |
| #scene-container { |
| width: 100vw; |
| height: 100vh; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| } |
| #uploadForm { |
| margin-top: 20px; |
| } |
| #settings { |
| margin-top: 20px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| #settings label { |
| margin: 5px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>画像のモザイク処理と3Dアニメーション</h1> |
| <form id="uploadForm"> |
| <input type="file" id="imageInput" accept="image/*"> |
| <button type="button" onclick="processImage()">画像を処理</button><br> |
| <button type="button" onclick="useExampleImage()">例の画像(Gの文字)を使用</button> |
| </form> |
| <div id="settings"> |
| <label> |
| シーン背景色: <input type="color" id="bgColorPicker" value="#222222" onchange="updateSceneBackgroundColor()"> |
| </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> |
|
|
| |
| <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 = 8; |
| let cubes = []; |
| let animationFrameId; |
| |
| function processImage(imageSrc = null) { |
| const fileInput = document.getElementById('imageInput'); |
| const file = imageSrc ? null : fileInput.files[0]; |
| |
| 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(); |
| document.getElementById('replayButton').style.display = 'block'; |
| }; |
| img.src = imageSrc || URL.createObjectURL(file); |
| } |
| |
| function useExampleImage() { |
| const exampleImagePath = 'ex.png'; |
| processImage(exampleImagePath); |
| } |
| |
| function create3DScene() { |
| if (renderer) { |
| |
| cancelAnimationFrame(animationFrameId); |
| cubes.forEach(cube => scene.remove(cube)); |
| cubes = []; |
| renderer.dispose(); |
| } |
| |
| |
| scene = new THREE.Scene(); |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
| updateCameraPosition(); |
| |
| renderer = new THREE.WebGLRenderer(); |
| renderer.setSize(document.getElementById('scene-container').clientWidth, document.getElementById('scene-container').clientHeight); |
| document.getElementById('scene-container').innerHTML = ''; |
| document.getElementById('scene-container').appendChild(renderer.domElement); |
| |
| updateSceneBackgroundColor(); |
| 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 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()-0.5) * 2200 - 100, |
| (canvas.height / 2 - y) * cubeSize * 1.2 + (Math.random()-0.5) * 2200 - 100, |
| (Math.random()-0.5) * 2200 - 100 |
| ); |
| scene.add(cube); |
| cubes.push(cube); |
| } |
| } |
| } |
| |
| function animate() { |
| animationFrameId = requestAnimationFrame(animate); |
| |
| cubes.forEach((cube, index) => { |
| const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2; |
| const targetY = ((canvas.height / 2) - Math.floor(index / canvas.width)) * 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); |
| } |
| |
| function replayAnimation() { |
| create3DScene(); |
| } |
| |
| function updateSceneBackgroundColor() { |
| const color = document.getElementById('bgColorPicker').value; |
| scene.background = new THREE.Color(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> |
|
|
