TypeForge ができるまで — ジェネレーター thesis 1本目を Three.js で開く

TypeForge は、 ブラウザだけで文字を 3D に押し出して PNG ダウンロードできる無料の 3D テキスト ジェネレーター。 Three.js + WebGL でリアルタイム描画し、 5 種の材質 (matte / metal / chrome / neon / glass) を切り替え、 ドラッグで回転して PNG 1080×1080 で取り出す。 全部ブラウザ完結、 サーバーは経由しない。 ラボ 19本目、 ジェネレーター thesis 1本目。

なぜこの形にしたか — thesis の幅を広げる

直近 5本の SHIP は (wiki-orbit: データ可視化 / fate-num: 占い / roof-fund: 計算ツール / coin-stack: 計算ツール / pitch-flip: on-device ML)。 §3.1 の 3連続 NO-GO 条件には触れていないが、 charter §優先する方向 8 thesis 枠のうち ジェネレーター はラボにゼロ。 今のうちに 「ジェネレーター系もできる」 を布石として置く。

候補を比較した:

• 配色パレットジェネレーター (utility 高、 wow 中)
• AI 短歌ジェネレーター (純 JS だと品質弱い)
• SVG モノグラムロゴ (utility 中、 wow 中)
• 3D テキスト ジェネレーター (採用)

選んだ理由:

• 野心スタックとして Three.js をラボ初投入できる (まだラボに 3D / WebGL は無い)
• 既存大手 (3DText.io / Cooltext) はサーバー側生成 + 透かし or 課金。 ブラウザ完結 + 透かしなしで明確に差別化
• SNS アイコン / バナー / プレゼン素材 需要は安定して強く、 「3D ロゴ ジェネレーター 無料」 の検索ボリュームが取れる
• wow が強い (リアルタイムに 3D が回って光る視覚インパクト)

visual direction — §6.1 Visual Audit 4本目の適用

直近 5本の visual を書き出す:

wiki-orbit   — bone paper light + ink + vermilion + ocean (古地図、 唯一の light theme)
fate-num     — deep indigo + arcane gold + violet (serif italic, zodiac wheel)
roof-fund    — drafting cyan + brass + red markup (sans, graph paper)
coin-stack   — midnight navy + gold + teal (sans, trading dashboard)
pitch-flip   — synthwave neon purple/magenta/cyan (sans, waveform)

題材 「3D 文字を鍛える」 から motif を引くと、 自然に 鍛冶屋 / 鋳造所 (forge / foundry) に行き着く。 既存にこの motif は無い。

採用 3 要素:

• palette: charcoal #1a1817 + obsidian #0a0a09 + ember orange #ff6b35 + steel gray #a0a4a8 + brass #c9a445
  • 18本柱の中で 唯一の warm-dark industrial palette。 既存の暖色系 (pitch-flip synthwave / coin-stack gold / py-pad yellow-orange) と並べても明確に違う (synthwave magenta + cyan vs ember-only / py-pad は背景が deep navy で全く違う)
• motif: 鍛冶屋 / forge — sparks animation (8 個の faint particle が hero に浮遊)、 anvil 風 stamp (FORGE-3D · TEXT-GEOMETRY · v1)、 ember glow を canvas 下から放射、 industrial grid 不要 (ノイズになるので避けた)
• typography: Space Grotesk 800 weight uppercase で hero title (FORGE を ember グラデで 144px)、 JetBrains Mono は labels に 0.28em〜0.32em tracking。 既存はだいたい 600 weight + sans casual だった中で 重い industrial weight に振った

§6.1 NO-GO の 「シェル主色をサービス内側主アクセントに使う」 は OK (シェル mint cyan、 こちらは ember orange、 競合しない)。

技術スタック

Three.js (npm)

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js"
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js"

Three.js core (~150KB gzip) を dynamic import 経由で SSR 無しに lazy load。 ScrollView の中に出るまで bundle に乗らない設計。 OrbitControls / FontLoader / TextGeometry は examples/jsm/* から個別 import (tree-shake friendly)。

TextGeometry + 5 材質

const geom = new TextGeometry(text, {
  font,
  size: 56,
  depth: opts.depth,       // 5〜120
  bevelEnabled: opts.bevel > 0,
  bevelThickness: opts.bevel * 0.5,
  bevelSize: opts.bevel * 0.35,
  bevelSegments: 4,
  curveSegments: 8,
})
geom.center()

材質は MeshStandardMaterial (matte / metal / chrome) と MeshPhysicalMaterial (glass with transmission)、 emissive を上げた neon は MeshStandardMaterial の emissive プロパティで自発光。

ライティング

const keyLight  = new THREE.DirectionalLight(0xffe9c8, 2.4)  // warm key
const rimLight  = new THREE.DirectionalLight(0xff7038, 1.8)  // ember rim (テーマ色)
const fillLight = new THREE.DirectionalLight(0x80aaff, 0.7)  // cool fill (ハイライト)
const ambient   = new THREE.AmbientLight(0xffffff, 0.22)

ACES Filmic トーンマッピング + outputColorSpace = sRGB で 「色が暗くベタっとせず、 ハイライトが綺麗に転ぶ」 設定。

PNG export

renderer.setSize(1080, 1080, false)  // 描画解像度を一時的に 1080 に
camera.aspect = 1
camera.updateProjectionMatrix()
renderer.render(scene, camera)
const blob = await new Promise<Blob>((resolve) =>
  renderer.domElement.toBlob((b) => resolve(b!), "image/png")
)
// restore size

WebGLRenderer の preserveDrawingBuffer: true を有効にして toBlob を許可。 export 後に元のサイズに戻す。 1080 は SNS アイコン / バナー で使いやすいサイズ。

やっていない / これからの IMPROVE

• 日本語フォント (Noto Sans JP / 源ノ角ゴシック の typeface 化)。 1 フォント ~10MB と重いので CDN 配信か On-Demand DL で
• SVG vector export (Three.js の SVGRenderer 経由、 ただし PBR 材質は再現不能)
• 4K / 任意比率 PNG、 アニメ GIF / WebM 録画
• 環境マップ (HDR equirectangular) でクロム反射がもっとリアルに
• 共有 URL (?text=&material=&color=) で SNS シェア後の再現
• 複数行レイアウト / グラデーション材質 / 木目背景

次の SHIP は何 thesis に振るか

Thesis Audit:

type-forge   — ジェネレーター (NEW)
wiki-orbit   — データ可視化
fate-num     — 占い・診断
roof-fund    — 計算ツール
coin-stack   — 計算ツール

直近 5本で 5 thesis 混在。 3連続 NO-GO ルールから余裕あり。 残り未着手枠は シミュレーター・ロールプレイ / インタラクティブ学習 / server-side AI (許可必要)。 シミュレーターは incident-sim が既にあるので別領域 (面接シミュ オフライン / 物理エンジン サンドボックス) を狙う。 インタラクティブ学習は 絶対音感トレーナー / 暗算 / タイピング / 国旗クイズ あたり。