【Three.js】マウスでカメラの位置を調整する【OrbitControls.js】

2023.7.6
edit:2023.7.8

Three.js (WebGL)でマウス操作によってカメラ位置をぐりぐりと動かしたかったのだが、うまくいかなかったので備忘録。
THREE.TOUCH is undefined
に悩まされている人もぜひ。

試したこと

1. TrackballControlsを用いた
   以下のブログを参考にした。うまくいかなかった。

2. OrbitControlsを用いた
   以下のブログなどたくさん参考にした。うまくいかなかった。

// うまくいかなかった例
var controls = new THREE.OrbitControls(camera);

controls.enableDamping = true;
controls.dampingFactor = 0.2;

問題点

TracballControlsではそもそも何も表示されなかった。

OrbitControlsではコンソールに以下のようなエラーメッセージが出た。

ypeError: THREE.TOUCH is undefined[Learn More] OrbitControls.js:82:19

解決策

以下のサイトを参考にした。

Recent change to OrbitControls breaks some projects

• ダウンロードしていた(使用していた)three.min.jsが古いバージョンだったため、新しいバージョンのものを参照するように変更。具体的には、以下の記述をHTMLに追加(古いthree.min.jsを参照している部分を削除)

<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<script src="https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js"></script>

• Javascriptファイル内において、camera変数を定義した後に、controls変数を定義、ループ関数内でupdate。具体的には、以下の記述をJsファイルに追加。

//camera変数の定義後
controls = new THREE.OrbitControls(camera, renderer.domElement);
// loop関数内
controls.update(); 

原因

TrackballControlsは現在のバージョンではサポートされていなかった。(参考にしたサイトが古かった。)
OrbitControlsは2022年以降仕様が変わっていた。

注意点

OrbitControlsを使用すると、以下のコードが使えなくなる。

camera.lookAt(new THREE.Vector3(x, y, z));

代わりに以下に設定。

    // OrbitControlsのターゲットを設定
    controls.target.copy(target);

    // カメラの更新
    controls.update();