Three.jsで作る、スクロールで画像がタイル状に回転する3Dセクション演出

import * as THREE from "https://unpkg.com/three@0.182.0/build/three.module.js";
const scene = new THREE.Scene();
const canvEl = document.getElementById("kumonosu-canvas");
const renderer = new THREE.WebGLRenderer({
	canvas: canvEl,
	antialias: true
});
const camera = new THREE.PerspectiveCamera(100, 1, 0.1, 1000);
camera.position.z = 100;
const imgUrls = ["https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200&auto=format&fit=crop&q=80", "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=1200&auto=format&fit=crop&q=80", "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1200&auto=format&fit=crop&q=80", "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200&auto=format&fit=crop&q=80", ];
const applyCover = (texture, aspect) => {
	const imageAspect = texture.image.width / texture.image.height;
	if (imageAspect > aspect) {
		texture.repeat.set(aspect / imageAspect, 1);
		texture.offset.set((1 - texture.repeat.x) / 2, 0);
	} else {
		texture.repeat.set(1, imageAspect / aspect);
		texture.offset.set(0, (1 - texture.repeat.y) / 2);
	}
};
const loader = new THREE.TextureLoader();
const textures = await Promise.all(imgUrls.map(async (url) => {
	const tex = await loader.loadAsync(url);
	tex.colorSpace = THREE.SRGBColorSpace;
	return tex;
}));
const materials = [
	new THREE.MeshBasicMaterial({
		map: textures[1]
	}), // 右
	new THREE.MeshBasicMaterial({
		map: textures[3]
	}), // 左
	new THREE.MeshBasicMaterial({
		color: 0xffffff
	}), // 上
	new THREE.MeshBasicMaterial({
		color: 0xffffff
	}), // 下
	new THREE.MeshBasicMaterial({
		map: textures[0]
	}), // 前
	new THREE.MeshBasicMaterial({
		map: textures[2]
	}), // 後
];
const BOXES_X = 10;
const BOXES_Y = 10;
const boxes = [];
const group = new THREE.Group();
scene.add(group);
for (let j = 0; j < BOXES_Y; j++) {
	for (let i = 0; i < BOXES_X; i++) {
		const geo = new THREE.BoxGeometry(1, 1, 1);
		const uvs = geo.attributes.uv.array;
		const u0 = i / BOXES_X;
		const v0 = 1 - (j + 1) / BOXES_Y;
		const u1 = (i + 1) / BOXES_X;
		const v1 = 1 - j / BOXES_Y;
		for (let k = 0; k < uvs.length; k += 8) {
			uvs[k] = u0;
			uvs[k + 1] = v1;
			uvs[k + 2] = u1;
			uvs[k + 3] = v1;
			uvs[k + 4] = u0;
			uvs[k + 5] = v0;
			uvs[k + 6] = u1;
			uvs[k + 7] = v0;
		}
		const mesh = new THREE.Mesh(geo, materials);
		const pivot = new THREE.Group();
		pivot.add(mesh);
		group.add(pivot);
		boxes.push(pivot);
	}
}
const updateLayout = () => {
	const w = canvEl.clientWidth;
	const h = canvEl.clientHeight;
	renderer.setSize(w, h, false);
	camera.aspect = w / h;
	camera.updateProjectionMatrix();
	const fov = THREE.MathUtils.degToRad(camera.fov);
	const visibleHeight = 2 * Math.tan(fov / 2) * 100;
	const visibleWidth = visibleHeight * camera.aspect;
	const cellW = visibleWidth / BOXES_X;
	const cellH = visibleHeight / BOXES_Y;
	const boxDepth = Math.max(cellW, cellH);
	textures.forEach(tex => applyCover(tex, camera.aspect));
	boxes.forEach((pivot, index) => {
		const i = index % BOXES_X;
		const j = Math.floor(index / BOXES_X);
		pivot.position.set(-visibleWidth / 2 + cellW / 2 + i * cellW, visibleHeight / 2 - cellH / 2 - j * cellH, 0);
		pivot.children[0].scale.set(cellW, cellH, boxDepth);
	});
};
window.addEventListener('resize', updateLayout);
updateLayout();
const scrollContainer = document.querySelector(".kumonosu-text-container");
scrollContainer.addEventListener("scroll", () => {
	const scrollPercent = scrollContainer.scrollTop / (scrollContainer.scrollHeight - scrollContainer.clientHeight);
	const rotation = scrollPercent * Math.PI * 1.5;
	boxes.forEach(box => box.rotation.y = rotation);
});
renderer.setAnimationLoop(() => renderer.render(scene, camera));