作者: Jared Liu
ライブで試す このプロジェクトについて
Drawing to 3Dは「スケッチがどう3Dモデルになるのか」をその場で遊べる体験にしています。トップページの花瓶、ロボット、キノコの家という3つのサンプルは、すべて実際の手描きスケッチからTripo image-to-modelで生成。原画と並べて表示され、ドラッグ、回転、ズームして確認できます。
自分の絵をアップロードして人間確認を通過すれば、匿名キューが処理を引き継ぎます。待機中は再構築アニメーションが流れ、完成後は白モデルをブラウザで回転させ、GLBとしてダウンロードできます。8Kテクスチャやさらに高い精度が必要なら、ワンクリックで結果をTripo Studioへ引き継げます。サイト全体がアカウント不要で6言語に対応し、静的ファイルとして配信され、Tripoの認証情報はCloudflare Workers内に安全に保管されます。
体験ポイント
- 花瓶、ロボット、キノコの家の3例は、すべて実際の手描きスケッチからTripoで生成。原画と並べて表示され、ドラッグして自由に回転できます
- 手描き画像を1枚（PNG/JPG/WebP）アップロードし、人間確認を通過すれば匿名生成キューが処理を引き継ぎます。登録は不要です
- 待機中はスケッチから立体を再構築するアニメーションを再生。完成した白モデルをブラウザで回転させ、GLBとしてダウンロードできます
- 1端末につき1日1回無料で生成。8Kテクスチャやさらに高い精度が必要なら、ワンクリックで結果をTripo Studioへ引き継げます
技術解説
サンプル生成 · Tripo v3 画像からモデル
3つのサンプルモデルはすべてTripo API v3 image-to-model（v3.1）から直接生成し、詳細ジオメトリ、PBRテクスチャ、50,000面の上限を指定しています。リポジトリには、生成来歴として各タスクのID、クレジット消費量、出力ファイルのSHA-256を保存。Web版はHシリーズのジオメトリを維持し、埋め込みテクスチャだけを4096pxから2048pxへ縮小しています。約500pxのビューアーでは見た目が変わらず、テクスチャVRAMを約75%削減できます。
匿名生成 · アカウント不要の白モデルパイプライン
ブラウザが保持するのは公開設定だけで、Tripoの認証情報はCloudflare Workersのディスパッチャー内だけに置かれます。Turnstileと端末フィンガープリントにより、端末ごとにUTC日付で1回の匿名生成を許可。タスク作成、画像アップロード、4秒ごとのポーリング（失敗が続くと最大30sまで指数バックオフ）、GLB blobのダウンロード、白モデルのその場レンダリングという流れです。ページを閉じるとsendBeaconでタスクを放棄し、スケジューラーのリースがクリーンアップの最終手段になります。
待ち時間を演出に · クリッピング平面による再構築
生成中にスピナーは表示しません。モデルには2つのマテリアルを持たせ、水平クリッピング平面でソリッドを下から上へ現しながら、ワイヤーフレームを逆方向の上から下へ消去。オレンジ色のスキャンリングが平面を追い、「AIが線から立体を再構築する」様子をそのまま演出します。体感進捗バーはタスク状態に割り当てた区間を滑らかに進み、prefers-reduced-motionのユーザーには静止ポーズを表示します。
SEO優先 · 6言語の静的サイト
Next.js 16で完全静的出力を生成。英語、繁体字中国語、日本語、韓国語、スペイン語、ポルトガル語ごとに専用ルート、canonical、hreflang代替、サイトマップ項目を用意しています。Tripo Studioへのリンクはすべて共通モジュールから一貫したUTM属性付きで生成され、utm_contentで該当するCTAまたは選択中のサンプルを正確に識別します。
