3次元空間での三角形と3次ベジエ曲線の交点計算システムを完成させました!主な特徴は以下の通りです:
3D表示機能
透視投影: リアルな3D表示
マウスドラッグ: カメラの水平・垂直回転
マウスホイール: ズームイン/アウト
3D軸表示: X(赤)、Y(緑)、Z(青)軸を表示
インタラクティブ操作
視点制御: マウスドラッグでカメラ回転
制御点移動: Ctrl+クリックで選択、Shift+ドラッグで移動
視野角・距離調整: スライダーで細かい調整
ワイヤーフレーム: 三角形の面表示/非表示切り替え
3D交点計算
線分近似法: 3Dベジエ曲線を線分に分割し、三角形平面との交点を計算
ニュートン法: 数値解析的に正確な3D交点を求める(重心座標チェック付き)
視覚的改良
グラデーション背景: 3D空間らしい背景
影付きエフェクト: 曲線と交点にシャドウ効果
半透明面: 三角形の面を半透明で表示
選択ハイライト: 選択中の制御点を強調表示
操作方法
マウスドラッグ: カメラ回転
Ctrl+クリック: 制御点選択
Shift+ドラッグ: 選択した制御点を3D空間で移動
マウスホイール: ズーム
スライダー: 視野角・カメラ距離調整
交点は赤い球で表示され、3D座標とベジエ曲線のパラメータt値が表示されます。リアルタイムで3D空間での幾何学的交点計算を体験できます!
関数定義の順序を修正: すべての関数をHTML内のscriptタグで定義
グローバル関数として配置: resetPositions(), resetCamera(), toggleAnimation(), toggleWireframe()をウィンドウレベルで定義
イベントリスナーの適切な設定: DOMContentLoadedを待たずに直接設定
エラーハンドリングの改善: null チェックを追加
動作する機能
3D表示: 透視投影による3次元表示
マウス操作: ドラッグでカメラ回転、ホイールでズーム
制御点操作: Ctrl+クリックで選択、Shift+ドラッグで移動
交点計算: 線分近似法とニュートン法の両方
視覚効果: グラデーション背景、シャドウ効果
UI制御: スライダーでFOVと距離調整
これで正常に動作するはずです。3D空間での三角形とベジエ曲線の交点計算をリアルタイムで確認できます!
透視投影の計算を完全に修正
カメラ位置の球座標計算を正確に
カメラの向きベクトル(forward, right, up)を正しく計算
座標変換行列を適切に適用
軸の描画を改善
原点を白い点で表示
軸の長さを調整(1.5に短縮)
より太い線で視認性向上
デバッグ情報の追加
カメラの現在位置をリアルタイム表示
エラーハンドリングを追加
制御点移動の計算を修正
カメラの向きに基づく正確な3D移動
スクリーン座標から3D座標への変換を改善
これで3D空間の図形が正しく表示されるはずです。軸(X, Y, Z)、三角形(緑)、ベジエ曲線(青)、そして交点(赤)がすべて見えるようになります。
マウスドラッグでカメラを回転させて、3D空間での図形を確認してください!