超入門編!THREE.jsで3Dの動かせる立方体を描く

こんにちは!daimaです。
本日は、これから
Three.jsを学びたい初心者向けに、
簡単な3Dオブジェクトを
描画する方法をご紹介します。

実装サンプル

今回作成する3Dモデルです。
ドラッグで立方体の回転、
マウスホイール操作で
カメラのズームイン/アウトが行えます

Three.jsのダウンロード

Three.jsのダウンロードはこちらから。
ページ左側の「download」をクリックすると
ファイルのダウンロードが開始します。

フォルダをダウンロードできたら、
「build」フォルダ内のthree.min.jsと
「examples/js/controls」のOrbitControls.js、
そして、「examples/js」のDetector.jsの
3種のファイルを取り出して
使用したいページに読み込みます。

コード

//この関数に記述していく
var main = function(){
  //シーンの基本設定
  var scene = new THREE.Scene();
  var width = 600;
  var height = 400;
  var fov = 60;
  var aspect = width / height;//アスペクト比
  var near = 1;//ここから
  var far = 1000;//ここまでの間に3Dの描画を行う
  var camera = new THREE.PerspectiveCamera( fov, aspect, near, far);
  camera.position.set(0,0,10);//カメラの位置。ここでは10手前に引いている
  var controls = new THREE.OrbitControls(camera);

  if(!Detector.webgl) Detector.addGetWebGLMessage();
//レンダラーをDOM上に設置する
  var renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setClearColor(0xFFFFFF, 1);
  renderer.setSize( width,height );
  document.body.appendChild(renderer.domElement);

//光源を設定する
  var directionalLight = new THREE.DirectionalLight( 0xffffff);
  directionalLight.position.set( 0, 0.7, 0.7); //光源の角度
  scene.add(directionalLight);

//geometry(形状)とmaterial(素材)を元に物体(Mesh)を作成
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0,0,4)); //頂点の作成
  geometry.vertices.push(new THREE.Vector3(2,0,0));
  geometry.vertices.push(new THREE.Vector3(0,-2,0));
  geometry.vertices.push(new THREE.Vector3(-2,0,0));
  geometry.vertices.push(new THREE.Vector3(0,2,0));
  geometry.vertices.push(new THREE.Vector3(0,0,-2));

  geometry.faces.push(new THREE.Face3(0,2,1)); //頂点を結んだ面の作成
  geometry.faces.push(new THREE.Face3(0,3,2));
  geometry.faces.push(new THREE.Face3(0,4,3));
  geometry.faces.push(new THREE.Face3(0,1,4));
  geometry.faces.push(new THREE.Face3(5,1,2));
  geometry.faces.push(new THREE.Face3(5,2,3));
  geometry.faces.push(new THREE.Face3(5,3,4));
  geometry.faces.push(new THREE.Face3(5,4,1));

  geometry.computeFaceNormals();//法線ベクトルの自動計算
  geometry.computeVertexNormals();//シェーディングを滑らかにする
//素材と形状からメッシュを作成
  var material = new THREE.MeshNormalMaterial();
  var mesh = new THREE.Mesh(geometry,material);
  scene.add(mesh);

  var wire = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true});
  var wireMesh = new THREE.Mesh(geometry,wire);//同じ形状からワイヤーも作成
  scene.add(wireMesh);

  renderer.render(scene,camera);//これまでに作った内容をレンダリング

//作成したメッシュをアニメーションさせる
  (function renderLoop(){
    requestAnimationFrame(renderLoop);
    controls.update();
    mesh.rotation.set(
      0,
      mesh.rotation.y + 0.02,
      mesh.rotation.z + 0.02
    )
    wireMesh.rotation.set(
      0,
      mesh.rotation.y + 0.02,
      mesh.rotation.z + 0.02
    )
    renderer.render(scene,camera);
  })();
};

//関数mainをDOM構築完了後に読み込む
window.addEventListener('DOMContentLoaded',main,false);
  1. レンダリングを行うRendererオブジェクトを用意する
  2. カメラの位置や角度を決めるCameraオブジェクトを用意する
  3. 光の色や強さを決めるDirectionalLightオブジェクトを用意する
  4. 3D描画する物体のgeometry(形状)とmaterial(表面)を指定する
  5. 指定したgeometryとmaterialを元に、mesh(物体)を作成
  6. Rendererオブジェクトでメッシュをレンダリング

Three.jsの実装の流れを
ざっくりとまとめました。

一見複雑ですが、
個別のステップに分けて考えれば
それほど難しくはありません。


多彩な表現力のWebGLを扱いやすくする「Three.js」

こちらでご紹介されているように、
オープンソースの3DCGツール「Blender」で作成した
3Dデータを読み込んで使用することも可能です。

これであれば、逐次
外観を確認しながら作業できるので、
かなり複雑な造形にも耐えられそうですね

Three.jsは三次元の座標を扱うため、
二次元のデザインに慣れきったwebコーダーにとっては
なかなか学習が大変ではありますが、
イベント系のサイトなど、
人目を引くインタラクティブなサイトを作るなら
是非抑えておきたい技術ですね。

参考サイト様

初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>
Three JS:Geometryでオリジナルの形状を作ってみる