Prompt : CGの雲を表示するコードをhtmlとJavaScriptで書け。

CGで雲を表示するHTMLとJavaScriptのコードを作成します。Three.jsを使用してボリュームレンダリング風の雲を実装してみましょう。3D雲レンダリングのデモを作成しました。このコードの主な特徴： **技術的な実装内容：** - **Three.js**を使用した3Dレンダリング - **プロシージャル生成**でフラクタルノイズを使った雲テクスチャ - **ビルボード技術**で複数の平面を組み合わせた雲の形状 - **透明度ブレンディング**でリアルな雲の質感 **インタラクティブ機能：** - 雲の密度、サイズ、風の強さを調整可能 - 雲の再生成機能 - アニメーションのON/OFF切替 **レンダリング手法：** - 複数の平面を異なる角度で配置してボリューム感を演出 - 中心から外側への透明度グラデーション - 風によるゆっくりとした動きのシミュレーション この実装では計算負荷を抑えながら、十分にリアルな雲の表現を実現しています。より高度な表現が必要な場合は、シェーダーを使ったボリュームレンダリングやレイマーチング技法も適用できます。

画面サイズを600x450に固定し、雲の数を8個から15個に増やしました。主な変更点： **画面サイズの変更：** - コンテナサイズを600x450に固定 - カメラのアスペクト比を4:3に設定 - レンダラーサイズも600x450に固定 - 中央配置とボーダーを追加してデモ感を向上 **雲の量の増加：** - 雲の数を8個から15個に増加 - 配置範囲を拡大（X軸40、Z軸30、Y軸12に拡張） - スケールの範囲を0.3-2.1に変更して大小様々な雲を生成 - 境界範囲も拡大して自然な循環を実現 これにより、より豊かで立体感のある雲の表現が可能になり、600x450の固定サイズで安定したパフォーマンスを実現しています。