2017.11.22WEB　-　three.js　WebGL

three.jsでWebGLを始める

three.jsとは

WebGLを利用するためのJavaScriptライブラリ。
他にもAway3D.js、Babylon.js等が存在するが、中でもthree.jsは特に人気。

まずはDL↓
https://threejs.org

build 内 three.min.js を使用します。

表示させてみる

いきなりテクスチャ貼りの立方体の表示

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>three.js TEST</title>
<style>
*,body { margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="stage"></div>
<script src="three.min.js"></script>
<script>
(function() {
  'use strict';
 
  var scene, light, camera;
  var box;
  var renderer;
  var width  = window.innerWidth;
  var height = window.innerHeight;
  var axis = undefined; // ガイド
  var grid = undefined; // ガイド
 
  // scene ステージ
  scene = new THREE.Scene();
 
  axis = new THREE.AxisHelper(1000);
  axis.position.set(0, 0, 0);
  grid = new THREE.GridHelper(100, 50);
  scene.add(grid);
 
  // light ライト
  light = new THREE.DirectionalLight(0xFFFFFF, 1); // 色、光の強さ
  light.position.set(0, 100, 30);
  scene.add(light);
 
  var loader = new THREE.TextureLoader();
 
  loader.load("texture.jpg", function(texture){
    createBox(texture); // mesh作成
    render();
  });
 
  function createBox(texture){
    box = new THREE.Mesh(
          new THREE.BoxGeometry(30, 30, 30),
          new THREE.MeshPhongMaterial({map: texture, color: 0x007eff})
    );
　　box.castShadow = true;
    box.position.set(0, 15, 0);
    scene.add(box);
  }
 
  // camera カメラ
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set(30, 30, 100);
  camera.lookAt(scene.position);
 
  // renderer レンダラー
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(width, height);
  renderer.setClearColor(new THREE.Color(0xcccccc), 0);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.getElementById('stage').appendChild(renderer.domElement);
 
  function render() {
    renderer.render(scene, camera);
  }
 
})();
</script>
</html>

まずjsにて設定するもの。
・scene
・light
・camera
・renderer

ステージを作成する

該当箇所及びコメント

  // scene ステージ
  scene = new THREE.Scene();                 // ステージを作成

  /* 以下はガイドとしてグリッドを表示させるためのもの */

  axis = new THREE.AxisHelper(1000);         // x,y,z軸の作成
  axis.position.set(0, 0, 0);                // 軸のポジション
  grid = new THREE.GridHelper(100, 50);      // グリッドの作成(サイズ, グリッドの大きさ)
  scene.add(grid);                           // グリッドをステージに追加

ライトを作成する

該当箇所及びコメント

  // light ライト
  light = new THREE.DirectionalLight(0xFFFFFF, 1); // 16進数での色, 光の強さ
  light.position.set(0, 100, 30);                  // ライトの位置
  scene.add(light);                                // ライトをステージに追加

ライトの種類

例ではDirectionalLightを使用しているが、他にも以下が設定可能。

AmbientLight 環境光。
散乱する光源によって、オブジェクトへのどの面へも一様に照らす。DirectionalLightにより光の当たらない部分への補助として使用することが多い。
DirectionalLight 無限遠光源。
太陽光のような無限遠にある平行な光。オブジェクトの位置に関わらず、影の形は決定される。光源からの距離による光の減衰なし。
HemisphereLight 半球光源。
AmbientLightに似ているが、上からの光の色と下からの光の色を分けられる。下からの光は反射光として、屋外での光の見え方に近い。
PointLight 点光源。
単一点からあらゆる方向から放射される光源。例としては、裸電球。
SpotLight スポットライト光源。
単一から一方向へ光を当てる光源。そのままスポットライトのような光源。
RectAreaLight 矩形光源。
面を横切って短径平面に均一に放出される。窓のような光源。

カメラを作成する

該当箇所及びコメント

  // camera カメラ
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );  // (画角, アスペクト比, 描画開始距離, 描画終了距離)
  camera.position.set(30, 30, 100);
  camera.lookAt(scene.position);

カメラの種類

例ではPerspectiveCameraを使用しているが、他にも以下が設定可能。

PerspectiveCamera 透視投影カメラ。
カメラからの距離によって遠近を表現。遠くにあるものほど小さく描画される、自然な見た目に近いカメラ。
OrthographicCamera 平行投影カメラ。
カメラからの距離に関わらず、物体が同じ大きさで描画されるカメラ。
CubeCamera 立方体カメラ。
オブジェクトのへの映り込み等、環境マッピングを行うためのカメラ。

レンダラーを作成する

該当箇所及びコメント

  // renderer レンダラー
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // alphaをtrueにすることで、setClearColorでの透過が有効に。antialiassetをtrueにすることで、PixelRatioでのRetina対応を有効に。
  renderer.setSize(width, height);                                      // 最初に設定したwidthとheight
  renderer.setClearColor(new THREE.Color(0xcccccc), 0);                 // 背景処理。canvasに対しcssで背景設定する場合は、2つめの引数を0にして透過させる。
  renderer.setPixelRatio(window.devicePixelRatio);                      // デバイスの解像度に設定することで、Retina対応。
  document.getElementById('stage').appendChild(renderer.domElement);    // HTML上の「id="stage"」の箇所へ反映させる
  
  function render() {
    renderer.render(scene, camera);                                     // ステージ、カメラのレンダリング
  }

オブジェクトを配置する

今回のテクスチャ。

該当箇所及びコメント

  var loader = new THREE.TextureLoader();        // テクスチャを利用するには、テクスチャをセットしてあげる。
  
  loader.load("texture.jpg", function(texture){      // テクスチャとして貼る画像をtextureに定義
    createBox(texture);                              // createBoxにtextureを反映させる
    render();
  });
  
  function createBox(texture){                       // createBox定義
    box = new THREE.Mesh(                            // boxをメッシュとして設定
          new THREE.BoxGeometry(30, 30, 30),         // BoxGeometryは立方体。幅, 高さ, 奥行
          new THREE.MeshPhongMaterial({map: texture, color: 0x007eff})  // テクスチャを貼り付ける, 基本となるボックスの色
    );
　　box.castShadow = true;                           // 影を作成するか。これは、先述したカメラ設定にも依る。
    box.position.set(0, 15, 0);                      // ボックスの位置
    scene.add(box);                                  // ボックスをステージに追加
  }

オブジェクトについての説明はそのうちちゃんとできれば。

それで、

こんな感じのが表示される。

ライトやカメラ、デフォルトで用意されているオブジェクト(立方体や球体等)あたり、そのうちもうちょっと掘り下げて書きたい気もする。

前の記事

Custom Field Suiteを使ったテンプレートが白紙になる
次の記事

Smart Custom Fieldsをfunctions.phpから追加する

このカテゴリの新着

新着

関連記事