ホーム > ブログ > プログラミングTips > threejsのOrbitControls.jsを使ってみた

threejsのOrbitControls.jsを使ってみた

2016.04.27

こんちゃ、銀ねこでーす。

最近休日は友達とも遊ばず、コードやプログラムの検証ばかりしてるので自分でも大丈夫かなーと自分のことを心配してます。

今日はthreejsのOrbitControls.jsを使ってみたのでそれについてまとめてみました。

OrbitControls.jsってなんぞ?

OrbitControls.jsを使うと、マウスドラッグによる視点移動・マウスホイールによるズームが可能になります。マウス操作だけで視点がグリングリン動く便利なクラスです。

ファイルはthreejsをダウンロードすると examples > js > controls > OrbitControls.jsと格納されてます。

スクリーンショット 2016-04-24 22.42.41.png

 なのでOrbitControls.jsを使いたい場合は、three.min.js(別にミニファイされてないタイプでもOK)の次にこのファイルを読み込みます。

  1. <script src="js/three.min.js"></script>
  2. <script src="js/OrbitControls.js"></script>

あとは、以下のコードでOrbitControlsを読み込みます。

  1. var controls = new THREE.OrbitControls( camera );

続けて書くとこんな感じです。

いつもGeometryをキューブばかりで面白くないので今回は知恵の輪みたいなやつを使ってみました。ライブラリに使い方があるのでそちらを参考にしてみてください。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <title>threejsの練習 -OrbitControls-</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.  
  8. </head>
  9. <body>
  10.  
  11. <script src="js/three.min.js"></script>
  12. <script src="js/OrbitControls.js"></script>
  13.  
  14. <script>
  15. var camera, scene, light, renderer, material, geometry, obj;
  16. var mouseX = 0, mouseY = 0;
  17.  
  18. function init() {
  19.  
  20. //scene
  21. scene = new THREE.Scene();
  22.  
  23. //mesh
  24. material = new THREE.MeshLambertMaterial( { color : 0xeeeeee } );
  25. geometry = new THREE.TorusKnotBufferGeometry( 50, 10, 100, 16 );
  26. obj = new THREE.Mesh( geometry, material );
  27. scene.add( obj );
  28.  
  29. //light
  30. light = new THREE.DirectionalLight( 0xffffff,0.5 );
  31. light.position.set(0, 300, 100 );
  32. scene.add( light );
  33.  
  34. //調整光
  35. ambient = new THREE.AmbientLight( 0xffffff, 0.3 );
  36. scene.add( ambient);
  37.  
  38. //render
  39. renderer = new THREE.WebGLRenderer({ antialias: true });
  40. renderer.setPixelRatio( window.devicePixelRatio );
  41. renderer.setSize( window.innerWidth, window.innerHeight );
  42. renderer.setClearColor(0xffffff);
  43. renderer.shadowMap.enabled = true;
  44. document.body.appendChild( renderer.domElement );
  45.  
  46. //camera
  47. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  48. camera.position.set( 100, 100, 0);
  49.  
  50. //event
  51. window.addEventListener( 'resize', onWindowResize, false );
  52.  
  53. //controls
  54. var controls = new THREE.OrbitControls( camera );
  55.  
  56. }
  57.  
  58. // 自動でカメラ位置をリサイズ
  59. function onWindowResize() {
  60. camera.aspect = window.innerWidth / window.innerHeight ;
  61. camera.updateProjectionMatrix();
  62.  
  63. renderer.setSize( window.innerWidth, window.innerHeight );
  64.  
  65. }
  66.  
  67. //カメラの位置を変えるアニメーション
  68. function move() {
  69. requestAnimationFrame( move );
  70. renderer.render( scene, camera );
  71. }
  72.  
  73. init();
  74. move();
  75.  
  76. </script>
  77. </body>
  78. </html>

サンプルはこちら

たった一行加えるだけでグリグリ気持ちがいいくらい回りますね!!!
次はオブジェクトに影をつけるのをやってみますー。

この記事のタグ