CodexとThree.jsで、風に揺れる麦畑を作ってみた

こんにちは。今回はブラウザで動く3Dの風景を作ってみました。

作ってみたのは、夕日の中、風に揺れる麦畑。

Codexにイメージを伝え、制作計画から環境構築、実装、動作確認まで進めてもらいました。3Dの描画には、JavaScriptライブラリの「Trree.js」を使っています。

この記事では、完成した動画と制作の流れを紹介します。依頼するときのプロンプトのコツや実装に使った機能もまとめました。

この記事でわかること

・完成した麦畑のイメージ（デモ動画）

・Codexへのプロンプトの伝え方

・Three.jsの構成と実装の仕組み

・制作を振り返って気づいたこと

完成した麦畑のデモ動画

まずはどんなものが完成したのか。お見せします。

ブログでは気軽にイメージが見られるように、12秒の動画にしました。残念ながら、音声はつけていません。

夕方の光を受けた麦が、風に合わせて揺れる風景を再現しました。手前には穂の形が見え、奥には麦畑と丘が続いています。今回の作品には「風の通り道」という名前をCodexがつけてくれました。

元のブラウザ版では、風の強さや向きを変えられます。視点の変更や一時停止、画面の切り替えもできるようになっています。

今回使用した技術

制作に使った主なツールは、次の通りです。ほぼCodexにプロンプトを投げてやりたいことベースで実現したため、技術はそこまで詳しくない方でも大丈夫です。

ツール	今回の役割
Codex	制作計画の整理、実装、修正、動作確認
Three.js	麦畑や空、光などの３D描画
TypeScript	描画や操作の処理を記述
Vite	開発サーバーの起動と公開用ファイルの作成
FFmpeg	収録した映像をMP4へ変換

実装したThtee.jsのバージョンは0.180.0（package.jsonなどで自身のバージョンは確認してください）。WindowsのMicrosoft Edgeで動作確認をしました。あとから思ったことですが、仕様として環境の指定もするとよいでしょう。※この記事自体は2026年10月の制作内容をもとにまとめています。

Codexへのプロンプトは、完成イメージから指示を渡す

最初に伝えたことは、「写実的な麦畑を作りたい」というイメージでした。

まず計画を立ててもらい、その計画をもとに実装を依頼しています。例えばCodexでなくてもClaudeCodeを使用するにしても計画→評価→実装の順で作っていくのが望ましいでしょう。

今回の制作を振り返ると、プロンプトで伝えたことは以下の３つ。

どんな風景を見せたいか
何が、どのように動いてほしいか
どこまでできたら完成なのか

以下は、今回の制作内容をもとに整理したプロンプト例です。実際の会話を、試しやすい形にまとめました。

1.「写実的に」を、見える要素に分ける

「写実的な麦畑」という言葉だけでも、大まかな方向は伝わります。

ただ、昼の明るい畑と、夕方の逆光の畑では印象が違います。カメラの高さによっても、見えるものが変わります。

そこで、時間帯・光・構図・動きを具体的にします。

プレーンテキスト

Three.jsで、風に揺れる麦畑の作品を作りたいです。
まずは制作計画を立ててください。

完成イメージ：
・夕方の低い太陽に照らされた、黄金色の麦畑
・カメラは麦の穂に近い高さ
・手前は穂の粒や細い毛が見える
・奥にはなだらかな丘と薄い霞がある
・風が畑全体を波のように渡っていく
・カメラはゆっくり動き、落ち着いて眺められる

対象はPCブラウザです。
形づくり、光、風の動き、描画負荷に分けて、
実装の順序と確認ポイントを提案してください。

ポイントは、「きれいにしてほしい」を、画面で確認できる条件に変えることです。

なるべく完成イメージは詳細に書きたいところです。ただ、最初の計画時点では「～を作りたい。計画たてて」と指示をすれば、イメージをCodex側でこんな感じでどうかと推奨してくれます。

実装の依頼には、操作と確認方法も含める

見た目の方向性が決まったら、実装を依頼します。

このとき、風景以外の操作も先に先に伝えておくと、完成度が具体的になります。

プレーンテキスト

技術構成：
・Three.js
・TypeScript
・Vite

必要な機能：
・風の強さと風向きを変更できる
・カメラの自動移動を止められる
・アニメーションを一時停止できる
・高精細、標準、軽量の画質を切り替えられる
・操作パネルを隠して風景だけを表示できる

実装後は、型検査とビルドに加えて、
実際のブラウザで描画と操作を確認してください。
起動方法はREADMEにまとめてください。

今回、ブラウザでの確認中に地面の描画エラーが見つかりました。

型検査やビルドが通っていても、描画処理に問題が残る場合があります。3D作品では、実際に表示して確認する工程も必要です。

修正は、場所と見え方をセットで伝える

修正するときは気になる場所を具体的にします。例えば行った調整を依頼文にすると、こんな形です。

プレーンテキスト

手前の麦の間から地面が見えすぎていて、
畑が少し疎に見えます。
近景の密度を増やしてください。
葉は幅を細くし、穂が目立つ形に調整してください。
変更後は同じカメラ位置で確認し、
見た目と描画速度の両方を比較してください。

「もっと自然に」という感想に、どこが気になるか、どう見せたいかを添えます。

同じカメラ位置で確認することも、修正前後の比較に役立ちます。

Three.jsでの構成

実装は、麦・風景・操作・画面の仕上げを分けた構成です。

今回の麦や地面は、コードから形を生成しています。外部の3Dモデルや写真素材は、作品本体には使っていません。

プレーンテキスト

src/
├─ main.ts
│  起動、カメラ、操作、画質設定、描画ループ
│
├─ wheat.ts
│  麦の形、大量配置、風による変形
│
├─ environment.ts
│  空、太陽、地面、丘、遠景の木、浮遊する粒子
│
├─ land.ts
│  地面の高さ、小道の位置、再現可能な乱数
│
├─ focus.ts
│  奥行きに応じた、控えめなぼかし
│
└─ style.css
   タイトルや操作パネルの見た目

風の動きを変える場合、主にwheat.tsを確認します。夕空や地面の印象を変えるならenvironment.tsです。

地面の高さ計算は、land.tsにまとめました。地面と麦の配置で同じ計算を行い、根元の位置を合わせます。

描画の土台に使った機能

基本となるThree.jsの機能は、以下のとおりです。

機能	今回の役割
Scene	麦、地面、光などをまとめる空間
PerspectiveCamera	遠近感のある視点
MeshStandardMaterial	麦や地面の質感
DirectionalLight	一方向から差し込む夕日の光
HemisphereLight	空側と地面側からの環境光の近似
FogExp2	遠景をかすませる霧
InstancedMesh	同じ形状の麦を大量に配置して描画

麦の材質には、MeshStandardMaterial を使っています。金属らしさや表面の粗さを指定する、物理ベースの材質です。Three.js公式ドキュメント

今回は、金属らしさを表す metalness を 0 にしました。表面の粗さを表す roughness は 0.86 です。

形や照明と組み合わせながら、穂や茎の見え方を調整しています。

麦一本を作り、まとめて配置する

麦一本の形は、基本的な形状を組み合わせて作りました。

茎：細い円柱
穂の粒：細長く変形した球
葉：頂点の位置を指定した、細く反った面
芒：穂から伸びる細い形状

芒は「のぎ」と読み、穂から伸びる毛のような部分です。

これらを、追加ユーティリティの mergeGeometries でまとめます。そして、麦を大量に並べるために InstancedMesh を使いました。

InstancedMesh は、同じ形状を共有しながら描画する仕組みです。位置や向きなどを変えつつ、描画の呼び出し回数を減らせます。Three.js公式ドキュメント

今回は、高さ・傾き・色に少しずつ違いをつけています。

また、手前の麦は細かく作り、遠くの麦は簡略化しました。一本の形と畑全体の密度を、両方見ながら調整しています。

風は、GPU上で麦の形を変えて表現する

風の動きには、頂点シェーダーを使っています。

これは、3Dモデルを構成する点の位置などを、GPU上で計算する処理です。

今回の実装では、次の情報を渡しています。

値	意味
uTime	経過時間
uWind	風の強さ
uDirection	風の向き

これらと麦の位置を使い、揺れるタイミングを計算します。

畑全体を渡る大きな波と、穂先の細かな揺れを重ねました。根元は固定し、高い位置ほど大きく動くようにしています。

実装には、材質のシェーダーを変更するonBeforeCompileを使いました。今回採用したWebGLRenderer向けの方法です。Three.js公式ドキュメント

影の処理にも、同じ風の変形を加えています。

具体的には、風の処理を追加した MeshDepthMaterial を用意しました。それを customDepthMaterial に設定し、麦本体と影の動きを合わせています。Three.js公式ドキュメント

描画したあとに、光やぼかしを整える

3Dを描いたあとには、画面全体の見え方を調整します。

この後処理を順番に実行するために、EffectComposer を使いました。処理を「パス」という単位で組み合わせる仕組みです。Three.js公式ドキュメント

今回の処理順は、次のとおりです。

プレーンテキスト

RenderPass
  3Dの風景を描画
    ↓
FocusPass【高精細のみ】
  奥行きに応じた弱いぼかし
    ↓
UnrealBloomPass【標準・高精細】
  明るい部分の光のにじみ
    ↓
OutputPass
  明るさや色の出力を調整
    ↓
ShaderPass
  周辺の減光と、ごく弱い粒状感
    ↓
画面に表示

FocusPass は、今回の作品用に作ったクラスです。

奥行きを記録した DepthTexture を読み、ピント位置に応じてぼかしています。風で変形したあとの麦と、同じ描画結果の深度を使いました。

UnrealBloomPass は、明るい部分に光のにじみを加える機能です。今回は、夕日の印象を補う程度に抑えています。Three.js公式ドキュメント