今回は自主課題の作成中に起きた問題を自分なりに解決する為に考えた内容について記録に残しておきたいと思います。

問題：three.jsにOrbitControls.jsを適用して、canvasタグ内で自由にカメラ操作が可能な状態で、HTMLにinputタグやテキストボックスに文字を入力する際、スマートフォンの場合はソフトウェアキーボードを展開時に入力位置を調整する為の矢印ボタンがカメラのパン移動（カメラの角度を変えずに平行に移動すること）に割り当てられてしまう為、操作時に物凄くストレスになる。

解決策１（カメラのパン移動を制限しても良い場合）：javascriptでOrbitControls.jsの設定時にenablePan = false;を加える。

この方法はカメラのパン移動を制限するので、画面中央に立体物を配置するようなレイアウト限定ですが、一行で問題を解決する事が出来ました。

本当はHTMLのinputタグがフォーカス状態になった時にOrbitControls無しでカメラを再設定、フォーカス状態解除でOrbitControls有りでカメラを再設定をプレビュー用のHTMLとセットで紹介してみようと思ったのですが、実際にやってみると現在の自分の実力ではカメラがパン移動した場合のカメラの座標を取得する事が出来ず断念。

解決策２（カメラのパン移動を制限したくない場合）：HTMLのinputタグがフォーカス状態になった時に3Dオブジェクトの親要素となるcanvasタグ自体にpointer-eventsをnoneに設定し、フォーカス解除時にはpointer-eventsをautoに戻す。


// フォーカス
$("input").focus(function () {
  $("canvas").css("pointer-events", "none");
})

// フォーカス解除
$('input').blur(function() {
  $("canvas").css("pointer-events", "auto");
});

こちらの方法ならinputタグフォーカス中はcanvasタグへの全ての操作を制限するので、パン移動も維持しつつ快適な入力が可能です。

今回は以上です。最初はもっと長い記事になるはずだったのですが、試行錯誤するうちにあっさり完結してしまいました。

自分の為の備忘録ですが、誰かの参考になれば幸いです。