Three.jsのOrbitControlsをもっと使いこなす！よくあるTips 5選

Three.jsで3Dモデルを扱う際、OrbitControlsはカメラ操作の基本ツールです。
この記事では、初心者がよくつまずくポイントや「ちょっと便利」な設定をまとめました。

---

✅ 1. コントロールの初期化は必ず「レンダーループ外」で！

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // なめらかに動く
controls.dampingFactor = 0.05;
→ controls.update() をアニメーションループ内で毎フレーム呼び出すのも忘れずに！

✅ 2. ズームだけONにしたいならこれ！
js
コピーする
controls.enableRotate = false;
controls.enablePan = false;
controls.enableZoom = true;
→ ズームだけ使えるビューアを作りたい時に便利。

✅ 3. 自動回転（オートローテート）機能をONにする
js
コピーする
controls.autoRotate = true;
controls.autoRotateSpeed = 2.0; // 数字を上げると早くなる
→ 放置時にモデルが回転して見栄えがよくなる。

✅ 4. 回転の制限（上下方向）をかける
js
コピーする
controls.minPolarAngle = Math.PI / 3;
controls.maxPolarAngle = Math.PI / 1.5;
→ カメラが真上や真下に行き過ぎないように制御できます。

✅ 5. パン操作だけを使いたい時
js
コピーする
controls.enableZoom = false;
controls.enableRotate = false;
controls.enablePan = true;
→ 2Dビューに近いインターフェースを実現できます。

💡 おまけ：イベントに反応する
js
コピーする
controls.addEventListener('change', () => {
  console.log('カメラが動きました');
});
→ 操作が行われたタイミングで他の処理を呼びたいときに使えます。

🚀 おわりに
OrbitControlsはちょっとした設定で表現の自由度が大きく変わります。
Three.jsを使ったインタラクティブなビューの土台として、しっかり理解しておくと後々かなり役立ちます！