マウス左ドラッグ: 回転 / マウス右ドラッグ: 移動 / マウスホイール: ズーム
Ctrlキー + マウス左ドラッグ: 制御点移動

3次ベジエ曲面ビジュアライザーには以下の機能があります:

表示モード切替
ワイヤーフレーム表示(青い線) 陰影表示(青い面) 両方同時表示 マウス操作によるカメラ制御 左ドラッグ:カメラ回転 右ドラッグ:カメラ平行移動 マウスホイール:ズームイン・アウト
技術的なポイント Three.jsを使用してレンダリングしますが、カメラ制御はライブラリを使わず自前で実装 4x4の制御点による3次ベジエ曲面の計算 曲面の法線計算による適切なライティング表現 制御点と制御グリッドの可視化
制御点は赤い点として表示され、それらの間を結ぶグレーの線で制御グリッドを形成しています。また、ウィンドウサイズの変更にも対応しています。

制御点をマウスドラッグで移動できるように機能を追加しました。以下が新しい機能と変更点です: 制御点の操作 Ctrlキー(Macの場合はCommandキー)を押しながら制御点を左クリックしてドラッグすると、その制御点を移動できます 選択中の制御点は黄色でハイライト表示されます 操作説明をインターフェースに追加しました 技術的な改善点 制御点を選択するためのレイキャスト機能を実装 制御点が移動された時に曲面とグリッドを自動更新する機能 カメラからの距離に応じて移動量を調整し、近い制御点も遠い制御点も同じ感覚で操作できるよう改善 UI改善 選択中のボタンがわかりやすくなるようにアクティブ状態の管理を追加 操作方法: 通常のマウス操作(回転・移動・ズーム)はそのまま使えます 制御点を移動する場合は、Ctrlキーを押しながら赤い制御点をクリック&ドラッグしてください 制御点を移動すると、リアルタイムでベジエ曲面が更新されます