編集できる範囲を指定する
どのオブジェクトを分離し、命名し、編集可能にしておくか指定しましょう。見た目が立派でも、中身が外殻だけでは使えない場合があります。
「没入感のある3D田園風景サイト」は、Three.js, 3DシーンをテーマにGPT-6 Astraで制作した3D作例です。実際の仕上がりを確認し、自分のプロジェクトに合わせてプロンプトを調整できます。
同じキャラクターを、二つの実際の制作方法で比較しています。結果は課題によって異なります。
ブラウザで動作する、没入感のある3D田園風景サイトを構築してください。テーマは次のとおりです: 「緑の海/田園を渡る風」 コードを完成させ、必要な依存関係をインストールして、プレビューを起動してください。提案や実装計画だけで終わらせないでください。 1. ビジュアル方針 全体の雰囲気は、アートディレクションに一貫性のあるインタラクティブな風景サイトのように、自然で穏やか、洗練されたものにしてください。 シーンには次の要素を含めてください: 前景:細く見分けやすい葉、曲がった茎、垂れ下がった稲穂をいくつか配置してください。 中景:遠くまで続く水田を、十分な密度と自然な間隔の変化を持たせて表現してください。 背景:不規則な樹木のシルエット、重なり合う低い丘、控えめな空気遠近法を配置してください。 空:柔らかなグレーブルーの色調、雲の微妙な変化、地平線での自然な色の移り変わりを表現してください。 デフォルトのカメラは稲穂より少し高い位置に置き、遠くの丘に向かって水田を見渡すようにしてください。 フレームの約3分の1を空が占め、水田が構図の中心となるようにしてください。 植生には主に深緑、オリーブグリーン、黄緑を使用してください。蛍光色のような緑は避けてください。 稲の高さ、向き、曲がり具合、色に自然なばらつきを持たせてください。 2. アニメーション要件 風は、水田を横方向に伝わる連続した波として見えるようにしてください: 根元はほぼ固定したまま、葉先や稲穂に向かうほど動きを段階的に強くしてください。 同じエリアの植物はまとまりを持って動かしつつ、個体ごとの違いも残してください。 ゆっくりとした大規模な風の波に、局所的な小さな揺らぎを組み合わせてください。 すべての植物が完全に同期して揺れないようにしてください。植物全体を平行移動させたり、葉をちらつかせたりしないでください。 デフォルトでは、長時間見ていても心地よい穏やかな風にしてください。 3. インタラクション要件 シーンに実際に作用する、シンプルな操作系を用意してください: 風速スライダー:風のアニメーションの強さと速度を滑らかに調整できるようにしてください。 ライティングモード:Morning、Afternoon、Golden Hourを用意してください。空、光の方向、色温度、フォグの色を連動して変化させてください。 ビュー モード:Open FieldとAmong the Riceを用意し、カメラを滑らかに切り替えてください。 一時停止/再開:環境アニメーションを一時停止・再開できるようにしてください。 マウスの動きにごく subtle なカメラ反応を加えても構いませんが、めまいを起こすような動きにはしないでください。 デフォルトでカメラを大きな角度まで連続回転させないでください。 4. インターフェースデザイン 全画面のシーン上にインターフェースを重ねて表示してください: 左上:小さなVERDANTのワードマーク。 左下:セリフ体の見出し「緑の海」。 その下に、小さめのサブタイトル「何もしなくていい。風のそよぎを感じて。」を配置してください。 右下:コンパクトで半透明なダークグリーンのコントロールパネル。 テキストは読みやすく、余白を十分に取り、操作系が主な風景を遮らないようにしてください。 狭い画面でも、コントロール同士が重ならず操作できるようにしてください。 5. 技術要件とパフォーマンス Three.jsを使用してください。既存のプロジェクトがある場合は、そのビルド環境を維持してください。 大量の植生を処理するため、インスタンシングとGPU頂点アニメーションを使用してください。 植物ごとに個別の描画オブジェクトを作成したり、毎フレームすべての植物をCPUで更新したりしないでください。 遠距離では植生のディテールを減らし、適切なピクセル比の上限を設定してください。 アセットの読み込みを安定させるため、プロシージャルなジオメトリとマテリアルを優先してください。 シーンはリアルタイムで描画してください。メインシーンとして風景の静止画や動画を全面的に使用しないでください。 モデル名や比較用ラベルはポストプロダクションで追加します。シーンには含めないでください。 6. 完了条件 実装後、利用可能なブラウザツールを使って次の項目を確認してください: 初期ビューが正しく描画され、明らかなコンソールエラーがないこと。 すべてのコントロールが実際にシーンへ作用すること。 前景・中景・背景の奥行きとレイヤーが見分けられること。 稲が単純な直立した緑の線以上の表現になっていること。 風の動きが連続的かつ自然で、明らかに均一な反復になっていないこと。 カメラの切り替えが滑らかで、狭い画面でもインターフェースが使用できること。 特定の確認を実行できない場合は、そのことを明確に記載してください。 最後に、起動手順と、実際に実装した機能の概要を提示してください。
プロンプトのポイント
Three.js, 3Dシーン, 水田 を題材にした GPT-6 Astra の 3D 作例「没入感のある3D田園風景サイト」を見てみましょう。作者の原文プロンプトか、公開情報を基にした制作指示かは、出典の区分で確認できます。
中心となる完成形を保ち、カメラ、操作、照明、成功時にできることを指定しましょう。見た目の細部を足す前に、まず動作を確認します。
どのオブジェクトを分離し、命名し、編集可能にしておくか指定しましょう。見た目が立派でも、中身が外殻だけでは使えない場合があります。
シーンを実行して目に見える不具合を確認し、フレームレート、操作、配置の具体的な基準を満たすまで繰り返すよう求めましょう。
大きな世界は地区、アセンブリ、節目に分け、各部分を確認してから範囲を広げましょう。
プロンプトでゲームやシーンを作ったら、そこに登場するキャラクターや小物も磨きましょう。Tripo で精細なアセットを作ってシンプルな仮モデルを差し替えると、世界がより生き生きとします。
作者が公開した作品紹介を基に、再利用できる制作指示としてまとめています。非公開のプロンプトをそのまま再現したものではありません。
生成した怪獣モデルと効果音を使い、怪獣作品に着想を得た Three.js ゲームを作成してください。巨大な戦闘が分かりやすく、怪獣の大きさが伝わる環境を構築してください。
リギング前に、Tripoキャラクターの表情差分をBlenderで用意してください。メッシュの位置をそろえ、使用していない差分は頭の内側に縮小して格納し、表情を段階的に切り替えてください。滑らかなブレンドやVRMへの対応をうたわないでください。