3次元ベジエ曲線と三角形の最近点計算

マウス: 左ドラッグ=回転, 右ドラッグ=移動, ホイール=ズーム
制御点: Shift+ドラッグで移動
ベジエ曲線
三角形
制御点(ドラッグ可能)
最近点
最短距離線
3D操作方法:
• マウス左ドラッグ: カメラを回転
• マウスホイール: ズームイン/アウト
Shift + ドラッグ: 制御点を移動(黄色い球体をクリック)
• 最適化方法: サンプリング(高速),ニュートン(高精度),ハイブリッド(推奨)
• 最近点と距離は常にリアルタイムで計算・表示されます

3D操作

最適化方法

形状操作

表示

2. 3つの最適化手法 サンプリング法: 高速・安定(デフォルト) ニュートン法: 高精度・収束が早い ハイブリッド法: サンプリング→ニュートン(推奨) 3. ニュートン法の実装 1階微分・2階微分: ベジエ曲線の解析的微分を使用 複数初期値: 局所最小値を回避 収束判定: 許容誤差による自動停止 4. パフォーマンス最適化 自動切り替え: FPS低下時にサンプリング法へ自動変更 フレームレート制御: 不要な再計算を削減 計算時間表示: 各手法の性能を比較可能

Three.jsによる簡潔な3D実装 Vector3クラス活用: 3次元ベクトル演算が簡潔に記述 CubicBezierCurve3: Three.js標準のベジエ曲線クラスを使用 自動的な透視投影とレンダリング: 複雑な投影計算が不要 インタラクティブな制御点操作 Shift + ドラッグ: 制御点をマウスで3D空間内移動 リアルタイム更新: 制御点移動と同時に曲線と最近点が更新 視覚的フィードバック: 制御点は黄色の球体で明確に表示 3D視点操作 左ドラッグ: カメラ回転(球面座標系) ホイール: ズームイン/アウト 画面サイズ: 600×450に最適化 豊富なキーボードショートカット R: 視点リセット A: 座標軸表示切替 G: グリッド表示切替 W: ワイヤーフレーム切替 Space: 自動回転 T: テストケース B: ベジエ曲線ランダム化 N: 三角形ランダム化 エラーハンドリングとパフォーマンス Three.js読み込み確認: CDN読み込み失敗時のエラー表示 FPS監視: パフォーマンス低下時の自動調整 レスポンシブ対応: 画面サイズ変更への対応 データ出力機能 JSON形式: 座標データと計算結果を出力 ファイルダウンロード: 結果を保存可能

3次ベジエ曲線と三角形の最近点計算のインタラクティブなデモを作成しました。 実装の特徴: 数値解法の実装 二段階最適化: 粗いサンプリング(0.02間隔)→細かい最適化(0.001間隔) 三角形上の最近点: 重心座標を使った効率的な計算 適応的探索: 最小値付近をより密にサンプリング インタラクティブ機能 ドラッグ操作: 制御点や三角形の頂点をマウスで移動可能 リアルタイム計算: 「最近点を計算」ボタンで即座に結果表示 視覚化: 最短距離線、最近点、距離値を色分けして表示 アニメーション: ベジエ曲線上の点の動きを確認可能 数値計算の詳細 ベジエ曲線評価: 標準的な3次ベジエ公式を使用 距離計算: ユークリッド距離による最適化 境界処理: 三角形の辺・頂点での特別処理を実装 実際に制御点を動かしながら最近点がどのように変化するかを確認できるので、アルゴリズムの動作を直感的に理解できます。計算結果は画面下部に詳細な数値で表示されます。

三角形上の最近点計算 三角形上の点は重心座標で表現: Q = uV₀ + vV₁ + wV₂ (u+v+w=1, u,v,w≥0) 制約条件付き最適化問題として解く: 三角形内部: ∇f = 0から解析解 辺上: 1次元最適化 頂点: 距離比較 3. 全体最適化 粗い探索: tを等間隔でサンプリング(例:0.1間隔) 細かい探索: 最小値付近でより密にサンプリング 収束判定: 黄金分割法やBrent法を適用 実装のポイント 効率化手法 包含球テスト: ベジエ曲線の制御点から作る包含球と三角形の距離チェック 適応的サンプリング: 曲率の高い部分をより密にサンプリング 早期終了: 十分小さな距離に達したら計算終了 数値安定性 重心座標の計算で数値誤差に注意 境界条件(t=0,1や三角形の辺・頂点)の特別処理 浮動小数点精度の考慮