Webで3D描画ができるTHREE.jsを試してみた

WebGLを利用した3D表現を可能としてくれる、 THREE.jsの修得にチャレンジしてみました。 学習のおさらいも兼ねて、 実際に3Dオブジェクトを描画するまでの過程を記載します。

サンプル(Codepen)

コード

//この関数に記述していく
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);

まずは、公式サイトから、
three.js-rxx.zipをダウンロードします。(xxはバージョン数)
そして、フォルダ内のthree.min.jsをHTMLに読み込みます。

初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>
THREE.jsの入門については、上記ページが大変分かりやすいです。
THREE.jsの描画の基本となる流れは、
1. レンダリングを行うRendererオブジェクトを用意する
2. カメラの位置や角度を決めるCameraオブジェクトを用意する
3. 光の色や強さを決めるDirectionalLightオブジェクトを用意する
4. 3D描画する物体のgeometry(形状)とmaterial(表面)を指定する
5. 指定したgeometryとmaterialを元に、mesh(物体)を作成
6. Rendererオブジェクトでメッシュをレンダリング
という感じです。

また、ダウンロードしたフォルダに同梱されている、
「OrbitControls.js」を読み込めば、
マウスでcanvas内のオブジェクトを動かすことが可能です。

多彩な表現力のWebGLを扱いやすくする「Three.js」
また、こちらのページで紹介されているように、
オープンソースの3DCGツール「Blender」で作成した
3Dデータを読み込んで使用することも可能なようです。

これならソース上だけで完成を想像しなくても、
複雑な3Dモデルの造形が可能ですので、
一気に表現の幅を広げられますね。

Three JS:Geometryでオリジナルの形状を作ってみる
今回のサンプルでお見せした八面体は、
上記の記事の内容を参考に作ってみました。
3D座標の扱いに慣れるまでは大変そうですが、
これからもっとTHREE.jsでの3D描画に慣れて、
よりオリジナリティある3D表現を実現したいと考えています。