カテゴリー別アーカイブ: JavaScript

three.js 入門

three.js は ブラウザで3Dを表示する WebGL をとっても簡単に使えるようにするライブラリでだ。
最近では3D表示のデファクトスタンダードとなっているみたいなので、マスターしておいて損はないと思う。

■ セットアップ

three.js から three.min.js をダウンロードし、適当なディレクトリに配置
#本稿では、/js ディレクトリに配置するものとします。
セットアップは以上で終わりだ。ね、簡単でしょ。

■ html テンプレート

以下に、three.js を使用する html ファイルのテンプレートを示す。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>たいとる</title>
<style> body { margin: 0; } canvas { width: 100%; height: 100% } </style>
</head>
<body>
  <script src="/js/three.min.js"></script>
  <script>
     // Javascript コードをここに書く
  </script>
</body>
</html>

画面に3Dオブジェクトを配置したり、アニメーションしたりするには、<bofy> の中の <script> 部分に JavaScript のコードを記述する。具体的な記述方法は次の節で説明する。

■ 立方体をくるくる回す

キューブデモ

上記は本家のデモへのリンク。実際に見てもらえばわかると思うが、テクスチャを貼ったキューブ(立方体)がくるくる回っている。
右下の【View source】をクリックすると、ソースを読むことができる。
以下、スクリプト部分を簡単に解説する。

var camera, scene, renderer;  // カメラ、シーン、レンダラー
var mesh;  // メッシュ
init();  // 初期化
animate();  // アニメーション処理

最初に、カメラ、シーン、レンダラー、メッシュオブジェクトを宣言している。
「カメラ」は文字通りカメラで、指定された位置から3Dオブジェクトを撮影するものだ。
「シーン」は3Dオブジェクトを複数配置できるものだ。
「レンダラー」は3Dオブジェクトを画面に表示する2D画像に変換するものだ。
「メッシュ」は、シーンに配置する3Dオブジェクトのことだ。
これらは init() で初期化される。
初期化が済むと、animete() を呼び、3Dオブジェクトの位置を定期的に変化させ、アニメーション表示させる。

function init() {
  // カメラの初期化
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.z = 400;  // 位置指定(x, y はデフォルトの0のまま)
  // シーン生成
  scene = new THREE.Scene();
  var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
  var geometry = new THREE.BoxGeometry( 200, 200, 200 ); // 形状
  var material = new THREE.MeshBasicMaterial( { map: texture } ); // 表面

  mesh = new THREE.Mesh( geometry, material );  // 形状・表面からオブジェクトを作り
  scene.add( mesh );  // それをシーンに配置、位置はデフォルトなので (0, 0, 0)
  // レンダラー生成
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  // ウィンドウリサイズ次のハンドラ登録
  window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;  // アスペクト設定
  camera.updateProjectionMatrix();  // 投射行列を更新
  renderer.setSize( window.innerWidth, window.innerHeight );  // レンダラーの描画サイズ更新
}
function animate() {
  requestAnimationFrame( animate );  // 本関数を定期的に(60FPS)呼び出すよう設定
  mesh.rotation.x += 0.005;  // オブジェクトの回転
  mesh.rotation.y += 0.01;
  renderer.render( scene, camera );  // 再描画
}

OpenGL を少しでも知っている人なら、とてもわかりやすいコードではないかと思う。
シーン、メッシュ、カメラ、レンダラーという抽象化も適切で、非常にわかりやすいく、扱いやすくなっている。