詳解OrbitControls
perspective とorthographic cameraは分かってるものとします
機能
カメラのrotate, pan, zoomをマウス及びキーボードでできるようになる
キーで上下左右の移動
マウスは各種ボタンとCtrl等のキーでrotate, pan, zoomを選べる
ただし、ソースコード内や変数名でpanと書かれているが、ここでは平行移動を指す
https://gyazo.com/cb606965f2798a2f22d0bec0e91ca12d
これではない
dollyも出てくるがカメラは前後方向に移動しない zoomしてるだけ
設定
rotate, pan, zoomに関連する設定値
minHoge maxHogeという変数名で動く範囲を制限できる
hogeSpeedでスピード調整
enableHogeで切り替え
dampingという設定をtrueにするとヌルっとすべって動く
いわゆる差分に係数をかけて足し上げる方式
pos += (target - pos) * 0.3
係数はrotate, pan, zoomで共通dampingFactor
動作の様子とデフォルトのマッピング
マウス
左ドラッグ→rotate
https://gyazo.com/6b80cf68909fc3ae8d4b2007500c7d54
右ドラッグ→pan
https://gyazo.com/7c39e9042624ca859e69eb254febb5cb
中ボタン→Macなので略
たぶんzoom操作
スクロール→zoom
https://gyazo.com/81545a799652f4470f8c9f0c847ed1b6
shift or ctrl or command おしながら左ドラッグ→pan
キーボード
十字キー→pan
スマホ
1touchでrotate
2touchでzoomとpan併用
ピンチ量がzoomに
平行移動量がpanに
回転は無視される
上記の対応は以下の変数をいじれば変えられる
pan(平行移動)の設定
false (default)
スクリーンの座標で動く
https://gyazo.com/72fc4a65ada0f9c7a1d2398481f49637
orbitcontrolsが行うpanは前後左右のみなので、結果的にpanのみだと地面からの高さは変わらない
true
カメラの座標で動く
つまり、前後のpanが、カメラのy座標に反映される
カメラに関するメモ
controlオブジェクトは座標に関して2つの変数を持つ
targetという座標(vector3)
カメラオブジェクトへの参照
各種動作に置いて、上記2つをupdate関数で更新する。
例えばpanはこの2つ両方に平行移動量を足す
Object3D上の階層関係として、target has cameraとはなっていない
perspective とorthographicのみサポート
内部での動作に関するメモ
ズームに関する注意
ズーム量は各フレームで固定値
macのトラックパッドは、スクロール量はdeltaYで取得できるがこれを反映してない
deltaYの正負だけ見て、ズームイン・アウトの判定しかしてない
スクロール判定があったフレームの量だけ(つまり、だいたい時間)動くので、macでの操作が非直感的になる
ゆっくり動かしても早く動かしても、時間が一緒ならズーム量が同じになってしまう
結果、なんかうまく動かせない感じがする
windowsだとだいたいマウスのコロコロでやるので困らないのかも
マウスイベントの変化量のスケールに関する注意
回転は、マウス等の動きのx,y方向の差分を、極座標表示したときの角度に対応して反映される。
これは、dom要素における長さをそのまま反映するのは適切でない
canvasの長さの1と3D空間の長さの1は関係がない
直感的に正しい回転や移動量の求め方
canvas要素の大きさで割り正規化した上で、現在見えているカメラの四角形の範囲の長さをかける
このとき、カメラの矩形が関わるので、当然perspective とorthographic cameraで計算方法が変わる
ソースコード内で、if文でisOrthographicCameraで分岐しているのがそれ
内部の計算方法
イベントリスナをcanvasやdocumentに対して入れて、マウス等の入力を取る
フレームごとの座標差分を取得
rotate, pan, zoomごとに差分をVectorオブジェクト等に足す
update関数にて
それらをすべてtargetやcameraに反映させる
update関数を毎フレーム呼ぶ
変数名
dollyといいう単語もあるが、カメラは前後移動してない。ズームしてるだけ
カメラのpositionが変わってない
ここでいうズームとは、カメラの変数であり、カメラのprojection matrix計算時に利用されるもの