Three.jsで作る、入力テキストが3Dメタル文字に変わるジェネレーター

import * as THREE from 'https://esm.sh/three@0.150.0';
import {
	OrbitControls
} from 'https://esm.sh/three@0.150.0/examples/jsm/controls/OrbitControls.js';
import {
	TextGeometry
} from 'https://esm.sh/three@0.150.0/examples/jsm/geometries/TextGeometry.js';
import {
	FontLoader
} from 'https://esm.sh/three@0.150.0/examples/jsm/loaders/FontLoader.js';
// --- シーン設定 ---
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a1a);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

function adjustCamera() {
	camera.aspect = window.innerWidth / window.innerHeight;
	if (window.innerWidth < 600) {
		camera.position.set(0, 0.8, 7.5);
	} else {
		camera.position.set(-1.8, 0.8, 4.5);
	}
	camera.updateProjectionMatrix();
}
adjustCamera();
const renderer = new THREE.WebGLRenderer({
	antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// --- ライティング ---
const ambientLight = new THREE.AmbientLight(0x404050, 0.6);
const mainLight = new THREE.DirectionalLight(0xffffff, 1.5);
mainLight.position.set(5, 5, 5);
mainLight.castShadow = true;
const backLight = new THREE.PointLight(0xffaa88, 1.2);
backLight.position.set(-3, 2, -4);
const rimLight = new THREE.PointLight(0xffffff, 0.8);
rimLight.position.set(0, 4, -2);
const frontLight = new THREE.PointLight(0xaaccff, 0.5);
frontLight.position.set(0, 0, 4);
const bottomLight = new THREE.PointLight(0x443322, 0.4);
bottomLight.position.set(0, -3, 0);
[ambientLight, mainLight, backLight, rimLight, frontLight, bottomLight].forEach(l => scene.add(l));
const FONT_URL = 'https://threejs.org/examples/fonts/helvetiker_bold.typeface.json';
// --- メタルテクスチャ ---
function createMetalMap() {
	const canvas = document.createElement('canvas');
	canvas.width = 512;
	canvas.height = 512;
	const ctx = canvas.getContext('2d');
	ctx.fillStyle = '#c0c0c0';
	ctx.fillRect(0, 0, 512, 512);
	for (let i = 0; i < 3000; i++) {
		ctx.fillStyle = `rgba(255,255,255,${Math.random() * 0.04})`;
		ctx.fillRect(Math.random() * 512, Math.random() * 512, 1, 20);
	}
	const tex = new THREE.CanvasTexture(canvas);
	tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
	return tex;
}
let currentFont = null;
const metalMap = createMetalMap();
let textGroup = new THREE.Group();
scene.add(textGroup);
async function rebuildText(newText) {
	if (!currentFont || !newText) return;
	const oldMeshes = [...textGroup.children];
	oldMeshes.forEach((m) => {
		let s = 1;
		const fade = () => {
			s -= 0.15;
			m.scale.set(s, s, s);
			if (s > 0) requestAnimationFrame(fade);
			else {
				if (m.geometry) m.geometry.dispose();
				if (m.material) m.material.dispose();
				textGroup.remove(m);
			}
		};
		fade();
	});
	const chars = newText.toUpperCase().split('');
	const meshes = [];
	let totalX = 0;
	const spacing = 0.02; // 文字間隔
	chars.forEach((char) => {
		if (char === ' ') {
			totalX += 0.3;
			return;
		}
		const geo = new TextGeometry(char, {
			font: currentFont,
			size: 0.45,
			height: 0.2,
			curveSegments: 12,
			bevelEnabled: true,
			bevelThickness: 0.04,
			bevelSize: 0.03,
			bevelSegments: 5
		});
		geo.computeBoundingBox();
		const mat = new THREE.MeshStandardMaterial({
			color: 0xc0c0c0,
			map: metalMap,
			metalness: 0.9,
			roughness: 0.2
		});
		const mesh = new THREE.Mesh(geo, mat);
		mesh.castShadow = true;
		mesh.userData.offsetX = geo.boundingBox.min.x;
		mesh.userData.width = geo.boundingBox.max.x - geo.boundingBox.min.x;
		mesh.userData.posX = totalX;
		totalX += mesh.userData.width + spacing;
		meshes.push(mesh);
	});
	const centerOffset = (totalX - spacing) / 2;
	meshes.forEach((m, i) => {
		m.position.x = m.userData.posX - centerOffset - m.userData.offsetX;
		m.scale.set(0, 0, 0);
		textGroup.add(m);
		setTimeout(() => {
			let s = 0;
			const anim = () => {
				s += 0.12;
				m.scale.set(s, s, s);
				if (s < 1) requestAnimationFrame(anim);
				else m.scale.set(1, 1, 1);
			};
			anim();
		}, i * 40);
	});
}
const input = document.getElementById('kumonosu-morphInput');
const btn = document.getElementById('kumonosu-morphBtn');
const handleMorph = () => {
	const val = input.value.trim();
	if (val) rebuildText(val);
};
btn.addEventListener('click', handleMorph);
input.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') handleMorph();
});
new FontLoader().load(FONT_URL, f => {
	currentFont = f;
	rebuildText("HAPPY");
});
window.addEventListener('resize', () => {
	adjustCamera();
	renderer.setSize(window.innerWidth, window.innerHeight);
});

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