Three.jsとGSAPで作る、画像を使ったスライドパズル

const IMAGE_URL = "https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?w=800&h=800&fit=crop";
let scene, camera, renderer;
let puzzlePieces = [];
let draggedPiece = null;
const gridSize = 3;
const pieceSize = 1;
const EMPTY_GOAL = {
	r: 2,
	c: 2
};
let emptyPos = {
	...EMPTY_GOAL
};
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let dragPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
let planeIntersect = new THREE.Vector3();
let dragOffset = new THREE.Vector3();
async function init() {
	document.getElementById('kumonosu-previewImage').src = IMAGE_URL;
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x0a0a0a);
	camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 6);
	camera.lookAt(0, 0, 0);
	renderer = new THREE.WebGLRenderer({
		antialias: true,
		alpha: true
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.outputColorSpace = THREE.SRGBColorSpace;
	document.getElementById('kumonosu-container').appendChild(renderer.domElement);
	await createPuzzle();
	window.addEventListener('resize', onResize);
	document.getElementById('kumonosu-shuffleBtn').addEventListener('click', shufflePieces);
	// イベント登録
	renderer.domElement.addEventListener('pointerdown', onPointerDown);
	window.addEventListener('pointermove', onPointerMove);
	window.addEventListener('pointerup', onPointerUp);
	animate();
}
async function createPuzzle() {
	const img = new Image();
	img.crossOrigin = "anonymous";
	const fullImage = await new Promise(resolve => {
		img.onload = () => resolve(img);
		img.onerror = () => resolve(null);
		img.src = IMAGE_URL;
	});
	for (let row = 0; row < gridSize; row++) {
		for (let col = 0; col < gridSize; col++) {
			if (row === EMPTY_GOAL.r && col === EMPTY_GOAL.c) continue;
			const piece = createPiece(row, col, fullImage);
			puzzlePieces.push(piece);
			scene.add(piece);
		}
	}
	setTimeout(shufflePieces, 500);
}

function createPiece(row, col, fullImage) {
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');
	canvas.width = 256;
	canvas.height = 256;
	if (fullImage) {
		const sw = fullImage.width / gridSize;
		const sh = fullImage.height / gridSize;
		ctx.drawImage(fullImage, col * sw, row * sh, sw, sh, 0, 0, 256, 256);
	}
	const texture = new THREE.CanvasTexture(canvas);
	texture.colorSpace = THREE.SRGBColorSpace;
	const geometry = new THREE.BoxGeometry(pieceSize * 0.98, pieceSize * 0.98, 0.1);
	const sideMat = new THREE.MeshBasicMaterial({
		color: 0x222222
	});
	const frontMat = new THREE.MeshBasicMaterial({
		map: texture
	});
	const materials = [sideMat, sideMat, sideMat, sideMat, frontMat, sideMat];
	const piece = new THREE.Mesh(geometry, materials);
	piece.userData = {
		origRow: row,
		origCol: col,
		currRow: row,
		currCol: col
	};
	updatePosition(piece, true);
	return piece;
}

function updatePosition(piece, instant = false) {
	const tx = (piece.userData.currCol - gridSize / 2 + 0.5) * pieceSize;
	const ty = (gridSize / 2 - 0.5 - piece.userData.currRow) * pieceSize;
	if (instant) {
		piece.position.set(tx, ty, 0);
	} else {
		gsap.to(piece.position, {
			x: tx,
			y: ty,
			z: 0,
			duration: 0.3,
			ease: "power2.out"
		});
	}
}

function shufflePieces() {
	let moves = 0;
	while (moves < 100) {
		const adjacents = puzzlePieces.filter(p => Math.abs(p.userData.currRow - emptyPos.r) + Math.abs(p.userData.currCol - emptyPos.c) === 1);
		const pick = adjacents[Math.floor(Math.random() * adjacents.length)];
		const tr = pick.userData.currRow,
			tc = pick.userData.currCol;
		pick.userData.currRow = emptyPos.r;
		pick.userData.currCol = emptyPos.c;
		emptyPos.r = tr;
		emptyPos.c = tc;
		moves++;
	}
	while (emptyPos.c < EMPTY_GOAL.c) slideLogic(emptyPos.r, emptyPos.c + 1);
	while (emptyPos.r < EMPTY_GOAL.r) slideLogic(emptyPos.r + 1, emptyPos.c);
	puzzlePieces.forEach(p => updatePosition(p));
	showMessage("Shuffled!", 1000);
}

function slideLogic(r, c) {
	const piece = puzzlePieces.find(p => p.userData.currRow === r && p.userData.currCol === c);
	if (piece) {
		const tr = piece.userData.currRow,
			tc = piece.userData.currCol;
		piece.userData.currRow = emptyPos.r;
		piece.userData.currCol = emptyPos.c;
		emptyPos.r = tr;
		emptyPos.c = tc;
	}
}

function onPointerDown(e) {
	updateMouse(e);
	raycaster.setFromCamera(mouse, camera);
	const intersects = raycaster.intersectObjects(puzzlePieces);
	if (intersects.length > 0) {
		const piece = intersects[0].object;
		if (Math.abs(piece.userData.currRow - emptyPos.r) + Math.abs(piece.userData.currCol - emptyPos.c) === 1) {
			draggedPiece = piece;
			raycaster.ray.intersectPlane(dragPlane, planeIntersect);
			dragOffset.copy(draggedPiece.position).sub(planeIntersect);
			gsap.to(draggedPiece.position, {
				z: 0.2,
				duration: 0.1
			});
			document.body.style.cursor = "grabbing";
		}
	}
}

function onPointerMove(e) {
	if (!draggedPiece) return;
	updateMouse(e);
	raycaster.setFromCamera(mouse, camera);
	if (raycaster.ray.intersectPlane(dragPlane, planeIntersect)) {
		draggedPiece.position.x = planeIntersect.x + dragOffset.x;
		draggedPiece.position.y = planeIntersect.y + dragOffset.y;
	}
}

function onPointerUp() {
	if (!draggedPiece) return;
	const ex = (emptyPos.c - gridSize / 2 + 0.5) * pieceSize;
	const ey = (gridSize / 2 - 0.5 - emptyPos.r) * pieceSize;
	const dist = Math.sqrt(Math.pow(draggedPiece.position.x - ex, 2) + Math.pow(draggedPiece.position.y - ey, 2));
	if (dist < 0.6) {
		const tr = draggedPiece.userData.currRow,
			tc = draggedPiece.userData.currCol;
		draggedPiece.userData.currRow = emptyPos.r;
		draggedPiece.userData.currCol = emptyPos.c;
		emptyPos.r = tr;
		emptyPos.c = tc;
	}
	updatePosition(draggedPiece);
	if (puzzlePieces.every(p => p.userData.currRow === p.userData.origRow && p.userData.currCol === p.userData.origCol)) {
		setTimeout(() => showMessage("Completed!", 3000), 400);
	}
	draggedPiece = null;
	document.body.style.cursor = "default";
}

function updateMouse(e) {
	mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
	mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
}

function showMessage(txt, dur) {
	const m = document.getElementById('kumonosu-message');
	m.textContent = txt;
	m.classList.add('kumonosu-show');
	if (dur) setTimeout(() => m.classList.remove('kumonosu-show'), dur);
}

function onResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
}
init();