yomotsu/camera-controls

これは何？

主な機能

• 01setLookAt、fitToBox、rotateToなどのメソッドで、Promiseに対応した滑らかなアニメーション遷移を実現。
• 02マウスとタッチの割り当てを設定できる、オービット、ドリー、トラック操作。
• 03メッシュとの衝突検出と、カメラのターゲットに対する境界制限。
• 04透視投影カメラと正投影カメラに対応。
• 05restやsleepなどのイベントにより、移動の停止に応じた処理が可能。

ユースケース

• 特定の視点へ移動したり、画面内にオブジェクト全体を収めたりできる、インタラクティブな3D製品ビューアの構築。
• awaitで連結できる、カメラツアーやスクリプト制御のシネマティックシーケンスの追加。
• 衝突判定を備えた、three.jsシーン内での一人称視点または三人称視点のナビゲーションの作成。

クイックスタート

1. 1

   camera-controls が必要とする three.js をインストールします。README にはどちらのパッケージについてもインストールコマンドが記載されていません

2. 2

   インスタンスを作成する前に、ライブラリをインポートし、CameraControls.install に THREE を登録します

3. 3

   カメラと DOM 要素を指定して CameraControls インスタンスを作成し、アニメーションループ内で update(delta) を呼び出します

使う前に知っておきたいこと

• !three.js を別途インストールし、CameraControls.install で登録する必要があります。そうしないと実行時エラーが発生します。
• !衝突判定では毎フレーム raycaster を使用するため、colliderMeshes を使うとパフォーマンスが低下する場合があります。

トピック

よくある質問

camera-controls とは？

OrbitControls風の操作に滑らかな遷移などの機能を加える、three.js向けカメラ制御ライブラリ。 camera-controlsは、THREE.OrbitControlsと同様の操作感で、カメラのオービット回転、ドリー、トラック（パン）を制御するTypeScriptライブラリです。主な特徴はアニメーション付きの遷移です。setLookAt、fitToBox、rotateToなどを呼び出すとカメラを時間をかけて滑らかに移動でき、これらのメソッドはPromiseを返すため、awaitで遷移を連結できます。

camera-controls は無料で使えますか？ライセンスは？

camera-controls は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

camera-controls は今もメンテナンスされていますか？

活発にメンテナンス中。camera-controls の最終コミットは 2026年10月21日 です。

camera-controls は何に使えますか？

特定の視点へ移動したり、画面内にオブジェクト全体を収めたりできる、インタラクティブな3D製品ビューアの構築。 awaitで連結できる、カメラツアーやスクリプト制御のシネマティックシーケンスの追加。 衝突判定を備えた、three.jsシーン内での一人称視点または三人称視点のナビゲーションの作成。

camera-controls のインストール方法は？

camera-controls が必要とする three.js をインストールします。README にはどちらのパッケージについてもインストールコマンドが記載されていません インスタンスを作成する前に、ライブラリをインポートし、CameraControls.install に THREE を登録します カメラと DOM 要素を指定して CameraControls インスタンスを作成し、アニメーションループ内で update(delta) を呼び出します

camera-controls はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/yomotsu/camera-controls