14
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

three.jsのOrbitControls.jsで簡単にカメラをマウスコントロールする

カメラの"orbit"というのは「移動」と訳されます。けれど具体的には、立体を中心にして周回軌道を描くように映すことです。3次元JavaScriptライブラリthree.jsに含まれるOrbitControls.jsを使えば、このオービットのほか、ズームやパンもマウスで簡単に操作できます。

OrbitControls.jsを使う準備

OrbitControls.jsは、three.jsライブラリの「examples/js/controls/」に納められているJavaScriptファイルです。これを<script>要素で読み込みます。たとえば、「js」というフォルダに納めたらつぎのように書き加えます。

<script src="js/OrbitControls.js"></script>

three.jsの3次元空間に立体をつくるコードは、jsdo.itに公開した正二十面体のサンプル「three.js r85: Rotating a icosahedron」を使うことにします(サンプル001)。光源がなくても発色するマテリアルMeshNormalMaterialを用いたので、コードは40行足らずです。この立体のつくり方については、「three.js入門 03: ジオメトリーを使う」をお読みください。

サンプル001■three.js r85: Rotating a icosahedron

threejs_icosahedron.png
>>jsdo.itへ

OrbitControlsでカメラをコントロールする

OrbitControls()コンストラクタは、つぎのようにCameraオブジェクトを渡して呼び出します。 OrbitControls.autoRotateプロパティにtrueを与えると、カメラはゆっくりと周回します。この場合、アニメーションの再描画メソッドの中からOrbitControls.update()メソッドを呼び出してください。

new THREE.OrbitControls(カメラ)

カメラを動かすためのマウス操作は、つぎのとおりです。

  • オービット: ドラッグ
  • ズーム: ホイール
  • パン: 右ボタンドラッグ

前掲サンプル001は、つぎのように手直しすればよいでしょう。OrbitControlsを加えたサンプルは、jsdo.itに「three.js r85: Controlling the camera with OrbitControls」として掲げました。

var controls;
function init() {

    camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);

    controls = new THREE.OrbitControls(camera);
    controls.autoRotate = true;

    update();
}

function update() {
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.01;
    controls.update();
    requestAnimationFrame(update);

}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
14
Help us understand the problem. What are the problem?