midori249 で採用しているテクスチャ生成フローを 5 つのノードに分解して図解しました。各ステップをクリックすると詳細がハイライトされます。
1. 画像を BASE64 に変換
convertImageToBase64(url, 300) → DataURL + 縮小サイズ
2. SVG テンプレート生成
SVG_TEMPLATE に photos/effects を流し込み
3. Canvas にレンダリング
Image.onload → drawImage → texture.needsUpdate
4. PlaneGeometry に貼り付け
CanvasTexture → MeshBasicMaterial (DoubleSide)
5. Raycaster でインタラクション
UV → SVG 座標 → InteractiveElement.contains()