このコードでは、以下の機能を実装しています：
ベジエ曲面：4×4のコントロールポイントを使用した3次ベジエ曲面を表示します。
ベジエ曲線：4つのコントロールポイントを持つ3次ベジエ曲線を表示します。
視点制御：3つのスライダーで以下を調整できます：
X軸回転（-180°～180°）
Y軸回転（-180°～180°）
ズーム（1～10）
視覚的要素：
曲面は半透明の青色で描画
曲線は赤色のチューブとして描画
コントロールポイントは小さな球体で表示（曲面のポイントは緑色、曲線のポイントは黄色）
座標軸が表示されます（赤=X軸、緑=Y軸、青=Z軸）
このコードをブラウザで開くと、ベジエ曲面とベジエ曲線が交差する3Dシーンが表示され、スライダーを使って視点を自由に調整できます。
更新した機能は以下の通りです： 制御多角形の表示： ベジエ曲線の制御点を結ぶ黄色の線が表示されるようになりました 制御点の見やすさのため、球体のサイズを大きくしました ドラッグ可能な制御点： Three.jsのDragControlsを使用して、曲線の制御点をマウスでドラッグできるようになりました 制御点をドラッグすると、リアルタイムでベジエ曲線と制御多角形が更新されます 操作の改善： ドラッグ中は回転が一時的に無効になり、操作しやすくなっています ドラッグ終了後に回転が元に戻ります 画面上部に使い方の説明が追加されました 制御点をドラッグすると、曲線の形状がリアルタイムで変化するので、ベジエ曲線と曲面の交差の様子を対話的に確認できます。スライダーを使った視点操作と組み合わせることで、さまざまな角度から形状を確認できます。
THREE.DragControlsの代わりに独自のドラッグ機能を実装： マウスイベント（mousedown, mousemove, mouseup）のリスナーを追加 THREE.Raycasterを使用して制御点の検出とドラッグを実装 ドラッグ操作の改善： マウスダウン時に対象のオブジェクトを選択 ドラッグ中はオブジェクトの位置を更新 マウスアップ時にドラッグ状態を解除 回転の一時停止と復帰： ドラッグ開始時に回転状態を保存して一時的に無効化 ドラッグ終了時に元の回転状態に戻す この修正版では外部ライブラリに依存せず、Three.jsの基本機能だけでドラッグ操作を実現しているため、エラーが解消されるはずです。制御点をドラッグすると、ベジエ曲線と制御多角形がリアルタイムで更新されます。