数千本の木と大量の草が茂る霧の森をThree.jsで構築

GPT-6 Astraが数時間かけて、カスタムシェーダー、膨大な草、シダ、小道を備えたリアルタイムのThree.js森を作りました。

デモ

Claude Code + Three.js(コードのみ)Wandy 2
実際のモデル · 360°どちらも同じ写真から作成:左は Claude Code(Opus 5.5)が Three.js のコードでモデリングした、手を加えていない1回分の実行結果。右は Wandy 2。

精細な3Dモデルを作ろう

コードだけでは単純な形しか作れません。Wandy 2なら写真1枚から、同じシーンで使えるテクスチャ付き3Dモデルを作れます。

Wandy3Dによる制作ブリーフ

作者がプロンプトを公開していないため、この作品を再現する方法を私たちがまとめました。

Build a highly detailed procedural forest in Three.js that the viewer explores from a first-person camera. Fill a large terrain with thousands of individual trees of varied shapes, millions of instanced grass clumps and tens of thousands of ferns, plus moss-covered logs, small white flowers and a worn dirt path winding between the trunks. Use custom GLSL shaders for wind-swayed grass and foliage, soft misty fog that fades distant trees into pale green haze, and filtered light coming through the canopy. Keep the palette natural: deep greens, brown bark, warm earth tones and a bright overcast sky. Use instancing and level of detail so it runs smoothly in a browser. Let the camera walk along the path and tilt up to show branches and leaves against the sky. Done means a web page that loads and runs in real time with convincing density and depth.

このプロンプトの使い方

  1. コーディングエージェントのGPT-6 Astraにビルドブリーフを貼り、Three.jsのWebページを依頼します。

  2. バイオーム、木の本数、霧の濃さ、光を変えて、松林やジャングル、紅葉の森にします。

  3. ページを開いて動作を確認し、重い場合はインスタンシングやLODの改善を頼みます。

元の投稿作者の方ですか? このページの修正・削除をご依頼ください