WebGLライブラリThree.jsの基礎と照明(Light)色々。

WebGLライブラリThree.jsの基礎と照明(Light)色々。

コメント 0件のコメント

はじめに

WebGLとは
3Dモデリングの開発ソフト等に使用される3次元コンピュータグラフィックスAPIのOpenGLをJavaScriptとバインディングしてWebブラウザに適応した技術。そのまま弄るのは少し敷居が高い。
Three.js
敷居の高いWebGLを少しの3D知識とJavaScriptの知識で簡単に記述出来るようにしてくれる素敵ライブラリ。Babylon.js等他にもライブラリは沢山あるけど多分シェアと取っつき易さは1番。

バージョンアップにドキュメンテーションの更新も一部追いついていないみたいなのでドキュメンテーションを見ながらでも一部混乱した部分があったので備忘録。

  1. Three.jsの基本的な使い方
  2. ジオメトリとマテリアルの種類
  3. 照明(Light)の種類

Three.jsの基礎

処理の流れ

  1. HTMLファイルの作成
  2. シーンを追加
  3. カメラの追加
  4. 物体の追加
  5. シーンのレンダリング

まずは出力するための土台となるHTMLを書きます。

各種ライブラリの読み込みとjQueryを使い慣れている人は併用も可能。

続いてThree.js公式サイトから最新版のThree.js(2015/11月現在r73)をダウンロード。

ファイル内のBuildフォルダの中にThree.jsの本体があるので任意のディレクトリに移動。

examplesフォルダの中には色々なプラグインが入っているので以下の3ファイルも任意の場所に移動します。

examples->js->controls->Orbitcontrols.js
examples->js->libs->dat.gui.min.js
examples->js->libs->stats.min.js

練習用なのでbodyの中にアペンド用のdivタグが１つあればOK。 

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Three.js</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/dat.gui.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script src="js/libs/stats.min.js"></script>
</head>
<body>
	<div id="scene"></div>
	<script>
        //処理をここに記述
        </script>
	
</body>
</html>

次に実際の処理。

まずScene（場面）とCamera（視点）を追加。

レンダリングするまで何を書いても出力されないので、先にレンダリング処理を行う。

(function(){//即時関数
var scene = new THREE.Scene();
//シーンの追加
var camera = new THREE.PerspectiveCamera(45, 16/9, 1, 1000);
//(視野, アスペクト比,どこまで近くを描画するか ,どこまで遠くを描画するか )
　　camera.position.set(100,100,500);//カメラの位置
　　camera.lookAt(0,0,0);//カメラの向き

var renderer = new THREE.WebGLRenderer();
//レンダラ―の種類(WebGLRenderer推奨)
　　renderer.setSize(window.innerWidth, window.innerHeight);//描画サイズ(ブラウザ幅最大)
　　renderer.setClearColor(0x888888, 1);//背景色
　　renderer.shadowMap.enabled=true;//シャドウマップ追加
　　document.getElementById('stage').appendChild(renderer.domElement);//HTMLにアペンド
renderer.render(scene,camera);//レンダリング処理
}

ここまでの処理が最低限の土台。

ジオメトリ、マテリアルの種類

続いて物体を追加、流れは以下の通り

  1. ジオメトリ（図形）の作成
  2. マテリアル（表面）の作成
  3. 位置や回転率を設定
  4. シーンに追加

Three.jsではBlender等で作成したobjやjson,dae形式の3Dファイルの読み込みにも対応していますが、基本的なジオメトリはそのまま追加可能です。

Geometry一覧
※リンク先はドキュメンテーションでサンプルを見れます。

2D

PlaneGeometry
四角形

CircleGeometry
円

RingGeometry
輪

3D

BoxGeometry
立方体

SphereGeometry
球体

TorusGeometry
トーラス(ドーナツ型)

TorusKnotGeometry
トーラス結び目

CylinderGeometry
多角柱（radiusSegmentsを増やすと実質円柱）

Tetrahedron、OctahedronGeometry、DodecahedronGeometry、IcosahedronGeometry
三角錐（三面体）、八面体、十二面体、二十面体、

TextGeometry
文字(要TextGeometry.js&フォントJSファイル読み込み)

基本的なマテリアル一覧

MeshBasicMaterial
光を一切反射しないのっぺりマテリアル

MeshPhongMaterial
光沢のあるマテリアル

MeshLambertMaterial
光沢の無い光を反射するマテリアル

3Dモデリングの基礎で使用するのは大抵この3種類。

コーディングは以下。

var Geometory =  new THREE.BoxGeometry(100,100,100);//図形の作成
var Material = new THREE.MeshPhongMaterial({//マテリアルの種類
			color:0xeeeeee,//色等の追加
		});
var box = new THREE.Mesh(Geometory, Material);//図形とマテリアルを使って物体を作成
box.position.set(0,50,0);//描画する座標
scene.add(box);//シーンに物体を追加

ここまでの処理を出力するとこんな感じ。

See the Pen MaNKmP by Yuya Saito (@U-YA) on CodePen.

照明を設定していない状態やBesicマテリアルを使用すると影絵のような物体しか表示されず3Dっぽくありません。

照明の設定

続いて照明(Light)の設定を行います。

Three.jsには基本5種類の照明があります。

Ambient light
シーン全体を全方向から照らす照明です。
物理的にはほぼあり得ない照明なので照明というよりはシーン全体基本色と考えたほうが合点が行くと思います。
引数はHex(色)のみ。

Directional light
対象物の全体を１方向から照らす照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)をとります。

Spot light
スポットライト。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にAngle(絞り具合)、第五引数にExponent(ターゲットの方向からの光の弱まり具合)、第六引数にDecay(拡散による光の弱まり具合)をとります。

Point light
裸電球のようにその場で全方向に拡散する照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にDecay(光の弱まり具合)をとります。

Hemisphere light
Point Lightと似たような特性だが上半分(skyColor)と下半分(groundColor)で別の色を設定できる照明。
第一引数にはskyColorのHex、第二引数にはgroundColorのHexをとります。

上記の通りBasicマテリアルでは光の反射は見えないのでBasic以外のマテリアルを使用。

ドキュメンテーションにも説明が掲載されていますが、読んでも実際にどう動くかわからないので色々弄ってみます。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

次はサンプルや公式ドキュメンテーションにも使用されているDAT GUIの使い方と各種Helperの使い方。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です