作者: 希彼赫
ライブで試す このプロジェクトについて
FLORAは、ワールドカップ出場国とその国を象徴する花を、暖かな光の標本館に集めました。アルゼンチンのジャカランダ、オランダのチューリップ、日本の菊、コロンビアのカトレア——すべての花がTripoで生成した3Dモデルで、ターンテーブルの上でドラッグしながら間近に観察できます。
リキッドグラス調のアーカイブカードには、各花の学名・科・開花期・象徴的な意味・文化メモが並びます。国旗バーでワンクリックで国を切り替えられるほか、カメラをオンにして手のジェスチャーでページ送りも可能。アセットは統一の出力プロトコル（+Z向き、原点は茎の根元）に従い、欠けたスロットにはプロシージャル代替植物が自動で補われます。
体験ポイント
- ドラッグでターンテーブル上の標本を回転、ダブルクリックでクローズアップ
- 下部の国旗バーでワンクリック切り替え、またはカメラに向かって手のジェスチャーでページ送り
- リキッドグラス調のアーカイブカードに、学名・科・開花期・象徴的な意味・文化メモを整理して表示
- アセットが欠けても同じプロトコルのプロシージャル代替植物が自動で補われ、展示台が空になることはない
技術解説
3D 標本 · Tripo テキストから 3D
館内の 6 つの国花 — カトレア、ダリア、ストレリチア、キク、ジャカランダ、チューリップ — はすべて Tripo のテキストから 3D 生成による作品。GLB に書き出し、GLTFLoader で必要になったタイミングで展示室に読み込みます。
どの花も同じ約束事で出力しています：正面は +Z、原点は茎の根元、高さ約 1 ユニット。仮にどれかの標本が欠けても、コードが同じ約束事でプロシージャルな代役を生やして展示台に立てるので、台座が空くことはありません。
暖かな光 · RoomEnvironment の IBL
展示室にはライトが 1 灯も置かれていません。暖かな光はすべて Three.js の RoomEnvironment によるもの — 環境マップを 1 枚生成し、Tripo モデルの PBR マテリアルがハイライトと柔らかな拡散を自然に見せてくれます。ライトを 1 灯ずつ調整する手間はなし。環境マップ 1 枚でライティングは完成です。
展示ラベル · CSS3DRenderer
展示ラベルの学名・科・文化メモは、実はページ上の本物の DOM 要素。CSS3DRenderer で 3D シーンと同期して回転します。利点はとても実用的で、どんな距離でも文字はくっきり、選択もコピーもでき、リキッドグラスの質感まで普通の CSS で書かれています。
ジェスチャーでページ送り · MediaPipe Hands
下部の国旗バーをクリックするほかに、この展示館は手を触れずにページ送りもできます。MediaPipe Hands がカメラ越しに手の動きを読み取り、手を振るだけで次の国のブースへ切り替わる — マウスに触れずに全館を見て回れます。
