【Three.js入門】カメラの手動制御:OrbitControls

ゲームでプレーヤーの視点を操作することがあると思います。今回は、カメラの手動制御について書きます。

OrbitControlsの導入

OrbitControlsは、Three.jsに含まれていないので、別途読み込みます。OrbitControlsのバージョンは、Three.js本体と同バージョンのものを読み込んでいます。

<script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js"></script>

カメラの手動制御

コードの記述例は、以下です。

const controls = new THREE.OrbitControls( object, domElement );
//object:Cameraを指定
//domElement:HTMLDOMElementを指定

カメラの初期位置を指定したあとにOrbitControlsを記述します。

(function(){
  'use strict';

  const width = 500;
  const height = 250;

  // Renderer
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.setClearColor(0xefefef);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.getElementById('stage').appendChild(renderer.domElement);

  // Scene
  const scene = new THREE.Scene();

  // Mesh = Geometry + Material
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  const material = new THREE.MeshLambertMaterial( { color: 0x0000ff} );
  const cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 0, 0);
  scene.add(cube);

  // Camera
  const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
  camera.position.set(0, 200, 300);
  camera.lookAt(scene.position);

  // Light
  const light = new THREE.DirectionalLight(0xffffff);
  light.intensity = 1;
  light.position.set(0, 0, 100);
  scene.add(light);

  // OrbitControls
  const controls = new THREE.OrbitControls( camera, renderer.domElement );

  // アニメーション処理
  function animate(){
    requestAnimationFrame(animate);

    controls.update();  //制御の更新処理
    renderer.render(scene, camera);
  }

  animate();

})();

以下のデモで操作できます。

マウス操作

• 軌道操作:左ボタンでドラッグ
• パン:右ボタンでドラッグ
• ズーム:マウスホイール

まとめ

少ない記述量でカメラの手動操作ができるので、手軽に導入できます。

参考サイト

• Three.js公式サイト
• Three.jsのOrbitControlsで手軽にカメラを制御する - ICS MEDIA