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

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

実装サンプル
Three.jsのダウンロード
コード
参考サイト様

実装サンプル

See the Pen
three.js test by DAI (@DAIIMANISHI)
on CodePen.

今回作成する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);