フラクタルで生成された島がある自然景観の3D CGを作成しました。主な特徴は以下の通りです: 機能: フラクタル地形生成: 複数のオクターブを使用して自然な地形を生成 高度による色分け: 砂浜(低地)→ 草地 → 森林 → 岩山(高地)の色変化 マウス制御: ドラッグで視点回転、ホイールでズーム アニメーション: 海面の波のアニメーション リアルな環境: 雲、霧、影付きライティング 操作方法: マウスドラッグ: 視点を360度回転 マウスホイール: ズームイン/アウト 技術的特徴: Three.jsを使用した3D レンダリング フラクタルノイズによる自然な地形生成 距離減衰による島の形状制御 頂点カラーによる地形の色分け リアルタイムの海面アニメーション 島の地形は毎回異なるパターンで生成され、自然で美しい景観を楽しむことができます
海面のアニメーションを確実に動作するように修正します。フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン2 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン3 海面のアニメーション機能を修正しました。変更点は以下の通りです: 修正内容: 海のジオメトリの細分化: 100×100から200×200に変更してより滑らかな波を実現 複数の波の合成: 4つの異なる周波数とスピードの波を組み合わせてリアルな海面を作成 座標軸の修正: 回転後の正しい座標軸を使用するように修正 海面アニメーションの特徴: 波1: 速い小波(周波数高、振幅小) 波2: 中程度の波(斜め方向) 波3: 細かいさざ波 波4: 大きなうねり(周波数低、振幅大) これで海面が自然な波のアニメーションで動くようになります。複数の波が合成されることで、よりリアルな海の動きを表現できます。再試行TNフラクタルノイズによる自然な地形生成、頂点カラーによる地形の色分けは計算してありますか編集はい、コードには既にフラクタルノイズによる地形生成と頂点カラーによる色分けが実装されています。詳しく説明します: 1. フラクタルノイズによる地形生成 javascriptfunction fractalHeight(x, y, octaves = 6) { let height = 0; let amplitude = 1; let frequency = 0.01; for (let i = 0; i < octaves; i++) { height += noise(x * frequency, y * frequency) * amplitude; amplitude *= 0.5; // 振幅を半分に frequency *= 2; // 周波数を2倍に } // 島の形状を作るための距離減衰 const distance = Math.sqrt(x ** 2 + y ** 2); const falloff = Math.max(0, 1 - distance / 400); return height * falloff * 15; } フラクタル計算の仕組み: 6つのオクターブ: 異なる詳細レベルの地形を重ね合わせ 振幅減衰: 各オクターブで振幅が半分になり、細かい詳細が追加 周波数倍増: 各オクターブで周波数が2倍になり、より細かい地形パターンを生成 距離減衰: 中心から離れるほど高度が下がり、島の形状を作成 2. 頂点カラーによる地形の色分け javascript// 高度による色分け let r, g, b; if (height < 0.5) { // 砂浜 r = 0.9; g = 0.8; b = 0.6; } else if (height < 3) { // 草地 r = 0.2; g = 0.6; b = 0.2; } else if (height < 8) { // 森林 r = 0.1; g = 0.4; b = 0.1; } else { // 山頂(岩石) r = 0.5; g = 0.5; b = 0.5; } colors.push(r, g, b); 色分けシステム: 高度 < 0.5: 砂浜色(ベージュ) 高度 0.5-3: 草地色(明るい緑) 高度 3-8: 森林色(濃い緑) 高度 > 8: 岩石色(グレー) 実装されている処理: 各頂点の高度をフラクタル関数で計算 高度に基づいて色を決定 頂点カラー配列に色情報を格納 Three.jsのvertexColorsオプションで頂点ごとの色を適用 これらの計算により、自然で多様な地形と、高度に応じた現実的な色分けが自動生成されます。再試行TN島はどこに描画されてるか不明。できたら中央か右に配置編集島の位置を確認して、中央に確実に配置されるように修正します。現在のコードでは島が見えにくい可能性があります。フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン4 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン5 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン6 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン7 島の配置と視認性を改善しました。主な変更点: 島の配置改善: 中央配置: island.position.set(0, 0, 0) で確実に中央に配置 カメラ位置調整: 島を見やすい角度と距離に初期設定 島のサイズ調整: 600×600に縮小して画面内に収まりやすく 地形の改善: 高度の最小値: Math.max(0, ...) で負の高度を防止 距離減衰の調整: 島の範囲を300に縮小してより明確な島の形状 高度スケール: 20倍に増加してより立体的な地形 色分けの改善: 閾値の調整: より現実的な高度区分(1, 4, 10) 色の明度向上: より鮮明で区別しやすい色設定 これで島が画面中央にはっきりと表示され、フラクタル地形と色分けがより分かりやすくなります。再試行TN島が画面中央にはっきりと表示されてません。編集島が見えない問題を解決するために、デバッグ情報を追加して問題を特定し、確実に島が表示されるように修正します。フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン8 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン9 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン10 島の表示問題を修正しました。主な変更点: 島の生成改善: サイズ縮小: 400×400に縮小して画面内に確実に収まるように 高度の基準値追加: (height + 0.5) で基本高度を上げて海面より確実に高く 距離減衰調整: 200に縮小してより明確な島の形状 デバッグ情報追加: 島の高度範囲と境界ボックスをコンソールに出力 海面レベル調整: 海面位置: Y=0に設定して島との位置関係を明確に 透明度調整: 0.7に下げて島が見えやすく カメラ位置最適化: 距離: 60に縮小して島に近づく 角度: より島が見やすい角度に調整 デバッグ情報: カメラ位置とシーン情報をコンソールに出力
島の高度差とカメラ位置を大幅に改善しました: 高度差の大幅な増加: 高度スケール: 25倍から45倍に増加 中央部強化: centerBoostで島の中央部により高い山を作成 オクターブ調整: より細かい地形の詳細を追加 6段階の色分け: 砂浜→草地→森林→高地森林→山地岩場→山頂(雪/岩石) カメラ位置の後方配置: 距離: 60から120に倍増して後方から全体を見渡し 角度: より低い角度(0.25)で島の立体感を強調 ズーム範囲: 50-300に拡大してより柔軟な視点変更 地形の特徴: 海岸線: 3未満(砂浜色) 低地: 3-8(明るい緑) 中地: 8-15(濃い緑) 高地: 15-25(さらに濃い緑) 山地: 25-35(茶色の岩場) 山頂: 35以上(白い雪/岩石) これで島に明確な高度差が生まれ、後方からの視点で島全体の立体的な地形がよく見えるようになります。
島の形状をより自然にしました。主な改善点: 自然な地形の特徴: 複数の山系: 3つの異なる方向の尾根(ridge1, ridge2, ridge3)を追加 谷の形成: 負の地形(valley)で自然な谷を作成 不規則な海岸線: coastNoiseで海岸の輪郭を自然に 楕円形の島: 縦横比を1.2:0.8にして自然な島の形状 地形の多様性: 複数の山頂: 中央一点集中ではなく分散した高地 尾根と谷: 現実的な山脈のような地形 不規則な高度変化: ランダム性を少し追加 楕円形の全体形状: 真円ではない自然な島の輪郭 色分けの改善: 水際・湿地: 茶色がかった低地 砂浜: 明るいベージュ 草原: 明るい緑 丘陵森林: 中程度の緑 山地森林: 濃い緑 岩場: 茶色 山頂: グレー これで富士山のような単純な円錐形ではなく、複数の山や谷、不規則な海岸線を持つ自然な島になります。再試行TN雲が不自然です。もう少しリアルにし半透明にして編集雲をより自然でリアルな半透明の雲に改善します。フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン17 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン18 フラクタル島の自然景観インタラクティブアーティファクト ∙ バージョン19 雲をより自然でリアルにしました。主な改善点: リアルな雲の構造: 複数の塊: 各雲は5-13個の球体を組み合わせて自然な形状を作成 不規則な配置: 各塊を円形に配置しつつランダムなオフセットを追加 自然な形状: 各塊を不規則にスケールして有機的な形状 半透明効果の改善: 透明度: 0.4-0.7のランダムな透明度で自然なばらつき depthWrite: false: 透明度の描画を改善 微妙な色の変化: わずかに青みがかった白色でリアルさを追加 雲の動きのアニメーション: ゆっくりとした移動: 風で流れるような自然な動き わずかな回転: 雲がゆっくりと回転する効果 個別の動き: 各雲が異なる速度と方向で動く 配置の改善: 適切な高度: 40-120の高度に配置 広い分布: より広範囲に雲を配置 数の調整: 20個から15個に減らしてより自然に これで雲が現実的な積雲のような形状になり、半透明で自然に空に浮かんでいるように見えます。