カメラの"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
>>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);
}