球とドーナツの衝突シミュレーション(ドーナツが落下して球に衝突)

0.30
0.0
0.5

三角形メッシュで構成される球とドーナツの衝突アニメーションを作成します。Three.jsを使用して実装します。
**主な特徴:** 1. **三角形メッシュ構造** - 球体:32分割の三角形メッシュ - ドーナツ(トーラス):16×32分割の三角形メッシュ - ワイヤーフレームで三角形構造を視覚化 2. **物理シミュレーション** - 重力による落下 - 衝突検出と反発 - 減衰効果 3. **視覚効果** - 衝突時の発光エフェクト - 滑らかな影とライティング - 回転アニメーション 4. **インタラクション** - 「リセット」ボタンでアニメーションをやり直せます
ドーナツが上から落下して球に衝突し、物理的に反応する様子をお楽しみください!

ドーナツの中心と球の中心のずれをスライダーで調整できるようにします。
1. **中心がずれた場合の物理挙動** - ずれがあると、ドーナツが球に斜めから衝突します - 衝突時に横方向の力が働き、ドーナツが横に滑ります - より現実的な衝突物理演算を実装 2. **具体的な動き** - **ずれ = 0**: 真ん中に落下し、真上に跳ね返る - **ずれ = 0.5〜1.0**: 斜めに衝突し、横に滑りながら跳ね返る - **ずれ = 1.5〜2.0**: 球の端に当たり、大きく横に弾かれる 3. **物理演算の改善** - 法線方向と接線方向の速度成分を分離 - 摩擦による減衰 - 境界での反射 - めり込み防止
スライダーで「中心のずれ」を調整して、様々な衝突パターンを試してみてください!

**変更内容:** 2. **跳ね返る強さの調整** - スライダーで0.1〜1.5の範囲で調整可能 - **0.1〜0.3**: ほとんど跳ねない(柔らかい衝突) - **0.7(デフォルト)**: 適度な跳ね返り - **1.0**: 強い跳ね返り - **1.5**: 非常に強く跳ね返る(エネルギーが増加) 3. **動作の違い** - 低い値: ドーナツが球にぶつかって止まりやすい - 高い値: ドーナツが勢いよく跳ね返る
「跳ね返る強さ」スライダーを調整して、様々な衝突の挙動を試してみてください!

変形をより明確に見えるようにします。変形量を大きくし、視覚効果を強化します。変形を大幅に強化しました!これで変形がはっきり見えるようになります。 **改善点:** 1. **変形量を大幅に増加** - 衝突時の変形が約4倍大きくなりました - 接触面が明確に潰れて見えます 2. **メッシュの細分化** - 16×32 → 24×48に頂点数を増やしました - より滑らかで自然な変形が可能に 3. **影響範囲の拡大** - 変形の影響が広い範囲に及ぶようになりました - 全体的な形状変化がよく見えます 4. **回復速度の調整** - ゆっくり元の形に戻るようにしました - 変形の様子が観察しやすくなります 5. **ワイヤーフレームのリアルタイム更新** - 変形中もワイヤーフレームが追従します **おすすめの見方:** - **ワイヤーフレームをオン**にすると、メッシュの変形がとても明確に見えます - **跳ね返る強さを0.3程度**に下げると、変形がゆっくり観察できます - **中心のずれを0**にして、真正面から衝突させると変形が最もわかりやすいです ぜひ試してみてください!

変形をさらに極端に強化し、背景をグレーに、フォントサイズを12に統一します。背景をグレーに変更し、フォントサイズを12に統一し、変形を極端に強化しました! **主な変更点:** 1. **背景色をグレー(#808080)に変更** - シーン背景も明るいグレー(#606060)に 2. **すべてのフォントサイズを12pxに統一** 3. **変形を極端に強化** - 変形量を8倍に増加(最大6.0) - 影響範囲を5まで拡大 - 変形の係数を2.0に設定 - 元の頂点から直接計算するように変更(累積変形を防止) 4. **メッシュをさらに細分化** - 24×48 → 32×64に増加 - より滑らかな変形 5. **ワイヤーフレームの線を太く** - linewidth: 1 → 2 6. **デバッグ用のログ追加** - コンソールに変形の強度が表示されます **確認方法:** - ブラウザのコンソールを開いてください(F12キー) - リセットして落下させると、衝突時に「変形適用」のログが表示されます - ドーナツが球に当たった瞬間、**大きく潰れて形が変わる**のが見えるはずです これでも変形が見えない場合は、ブラウザのコンソールにログが表示されているか確認してください。

三角形メッシュ同士の交差判定を選択できるように追加します。三角形メッシュ同士の交差判定を選択できるようにしました! **新機能:** 1. **衝突判定モードの切り替え** - 「三角形メッシュ交差判定」チェックボックスを追加 - オフ(デフォルト): 簡易距離判定(中心間距離で判定) - オン: 三角形メッシュの頂点ベースの交差判定 2. **三角形メッシュ交差判定の仕組み** - 球の各頂点がドーナツの近くにあるかチェック - ドーナツの各頂点が球の内部にあるかチェック - ワールド座標系で正確に判定 - パフォーマンスのため8頂点ごとにサンプリング 3. **コンソールログ** - 衝突判定モードの切り替えがログに表示されます - メッシュ交差が検出されると詳細がログに表示されます **使い方:** 1. ブラウザのコンソールを開く(F12キー) 2. 「三角形メッシュ交差判定」をオンにする 3. リセットして落下させる 4. コンソールに「メッシュ交差検出」のログが表示されます **違い:** - **簡易判定**: 中心間の距離だけで判定(高速) - **メッシュ判定**: 実際の三角形メッシュの頂点位置で判定(より正確、やや低速) メッシュ判定の方が、ドーナツの穴の部分など、形状を考慮したより正確な衝突検出が可能です!