Three.jsで3D気分

Three.jsで3D気分
３D素人でもちょっぴり操作できそう！

HTML5 勉強会@福岡 - 第18回
２０１２．１０．５（金）

12年10月7日日曜日

自己紹介
下請けプログラマの江原と言います。

twitter：itokami1123 です。

JavaScriptとObjective-Cが好きです。HTML5やiOSの案
件がありましたら是非仕事ください。

本日お話します3Dについては知ったかぶりですので間
違ってたらビシビシ（優しく）指摘お願いしますね。


HTML5で3D?
HTML5にはブラウザでスムーズに

3D表示可能なWebGLがつきました。

ちょっと見てみましょう↓

http://alteredqualia.com/three/examples/webgl_cars.html


すごいですね！


しかし残念な事にスマートフォンでは、ほぼ使えない状況で
す。http://mobilehtml5.org/

でも来年には使える状況になる可能性があります。

今覚えておけばいつか仕事に困らないかも！


WebGLはむずい？

ところが．．．．．難しい．．．

私のようなOpenGLは使った事がない人には
とても扱いが難しいものです。

しかし、なんとか3D表示してみたいなぁと
思う訳です。


Three.js

そこで「Three.js」を使います。

DOMを便利に操作するjQueryのように

WebGLを扱うライブラリです！


手に入れよう！
https://github.com/mrdoob/three.js/

ライブラリは、githubから

buildにライブラリが入っています。


ざっくり仕組み
1) scene 仮想3次元空間

camara カメラの目線

light 照明

mesh 物

2) renderer canvasに3Dを描画する機能

3) canvas 描画する場所（２次元）


よくわかりません。。

なので、ひとつひとつ見て行きましょう。


scene

Scene(シーン)は、3次元空間を生成し
照明や物、カメラを配置できます。
劇の舞台、htmlのbodyみたいな感じでしょうか。

renderer
rendererは2次元のcanvasに3次元を描画します。

html
div

renderer canvas
が描くよ
※犬の絵は、http://e-poket.com/illust/を使用しています。


canvas
canvasはhtml5のcanvasです。

3D描画用としてThree.jsがdivの中に生成します。

html
div canvas Three.jsが
divの生成
準備が必要！


続いて

sceneに配置する物を説明します。


camera
レンダラーに描いて欲しい目線を教えます。

カメラの画角, 縦横比, クリッピング手前,クリッピング奥、
位置などを変更すると色々な描画になります。

画角とか？用語がむずかしいですね。。


camera補足-画角
画角（視野角）とは

ここ

数字が大きい程広い範囲が見えます

すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=597


camera補足-クリッピング
クリッピングとは

この範囲内が
描画対象
手前
奥

無限に手前や奥を描画する訳ではないみたいですね。

すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=597


light
シーンの中に光を灯す照明です。

位置や明るさを変える事が出来ます。


mesh
sceneに配置するオブジェクトです。

構造を表す素材を表す
geometory material mesh!

+ =


それでは実際に
コーディングして
みましょう！


htmlの作成
1. ライブラリを配置します。
<script type="text/javascript" src="js/Three.min.js" >
</script>

2. divを用意します。
<div id="threeJsPane" >

</div>

sceneの書き方

下のように描けば3D空間が生成されます。
var scene = new THREE.Scene();


lightの書き方

光の色と強さを指定してlightオブジェクトを作ります。
var light = new THREE.PointLight( 色, 強さ );

光源の位置を指定します。
light.position.set( x座標, y座標, z座標 );

シーンに加えます。
scene.add(this.light);


lightの種類
実は、４種類あるみたいですけど
今回のデモは、なんとなく点光源を選んでます。

環境光 THREE.AmbientLight

平行光源 (無限遠光源) THREE.DirectionalLight

点光源 THREE.PointLight

スポットライト THREE.SpotLight


cameraの書き方

色々指定してcameraオブジェクトを作ります。
var camera = new THREE.PerspectiveCamera( 画角,縦
横比, クリッピング手前, クリッピング奥 );

カメラの座標を指定します
camera.position.set( X座標, Y座標, Z座標 );


cameraの書き方

カメラの頭の向きを決めます。
どれかを1にしてその他を0にします。
camera.up.set ( up_x, up_y, up_z );

カメラが見つめる座標を指定します。
camera.lookAt( { x:0 , y:0 , z:0 });


rendererの書き方
レンダラーオブジェクトを生成します。
var renderer = new THREE.WebGLRenderer({antialias:true});

レンダラーが描く絵の横・縦幅を指定します。
※div要素と同じで良いと思います。
renderer.setSize( 横幅 , 縦幅 );

レンダラーが描く絵の背景の色を指定します。
renderer.setClearColorHex( 色 , 透明度 );

描画先のdiv要素に追加して完成です！
$(div要素).append( $(renderer.domElement) );


rendererの描き方
レンダラーの描画は以下のようにループさせます。

var animationLoop = function(){

// ☆描画！！
renderer.render( scene, camera );

requestAnimationFrame( animationLoop );

}

animationLoop();


rendererの動かし方
requestAnimationFrameって何？？

setIntervalでも出来るのですけど
ブラウザが裏に回っている時は、
動作しない為、こちらを使った方が
負荷が軽そうです。

※1秒間に60回描画するみたいです。

参考URL http://d.hatena.ne.jp/calpo/20110523/p1


ここまでを
動かしてみましょう。
デモURL:http://www.itokami1123.com/Three/20121005/


なにも出ません！

なんも物を置いてないからです。


meshの書き方箱

箱の構造を作成します。
var gemetry = new THREE.CubeGeometry( 幅, 高さ,
奥行き );

つづいて箱の表面の素材を作ります。
（下の例は光を反射する素材です）
var material = new
THREE.MeshLambertMaterial({ color: 色 });


meshの書き方箱
合体すると箱メッシュになります。
var box = new THREE.Mesh( gemetry, material );

箱の座標を指定します。
box.position.set( x, y, z );

シーンに箱を登場させます。
this.scene.add(this.box );

どんな箱が出来るか確認してみましょう。
BOX_OFFボタンを押す


meshの書き方板

地面が無いと寂しいので板を作って地面にしましょう。

板の構造を生成
var geometry = new THREE.PlaneGeometry(幅,高さ);

地面の表面に今回は画像(jpeg)を使ってみます。
var material = new
THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture('xxxx.jpg') });


meshの書き方板

合体して地面の出来上がり
var floor = new THREE.Mesh( geometry, material );

シーンに登場させましょう
scene.add( floor );

FLOOR_OFFボタンを押す


meshの書き方モデルデータ
blenderで描いたモデルデータを
変換してシーンに登場させることができます。
まず、blenderに設定が必要です。

ダウンロードしたライブラリの以下を
mrdoob-three.js-ef5f05d/utils/exporters/blender/
2.63/scripts/addons

Blenderの中に貼付けます。
./Contents/MacOS/2.63/scripts/addons
※2.63を使っています。



blenderのデータは↓を使わせてもらいました。
ありがとうございます。
http://blog.romatica.com/tag/three-js/


File->Export->Three.jsで出力出来ます。

※ 手順が悪いのか。。何故かoctcat2.pngが無いエラーが出ますので
octcat.pngをリネームして使いました。



このデータを読み込むには
JSONLoaderオブジェクトを生成します。
var loader = new THREE.JSONLoader();

データの取得元とロード後によばれる関数を用意します。
loader.load( "modelData.js", ロード後呼ばれる関数);


ロード後に、よばれる関数を用意します。
var loadCallBack = function( geometry ){
// geometoryが引数でくるのがポイントです！

var material = new THREE.MeshFaceMaterial();
var mesh = new THREE.Mesh(geometry,material);

// モデルデータを配置すると小さい（大きい時）は
// 以下で大きさを調整できます。
mesh.scale.set( x座標 , y座標 , z座標 );


ロード後よばれる関数を用意します。
var loadCallBack = function( geometry ){
・・つづき・・
// 箱と同様に位置を設定します
mash.position.set( 0, 0, 25 );

// シーンに登場させましょう！
scene.add( mesh );
}

それでは見てみましょう。
OCTCAT_OFFボタンを押す


今日の内容はココまでです！


最後まで聞いてくれて
ありがとうございました！


Three.jsで3D気分

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Three.jsで3D気分 (20)

More from Toshio Ehara (20)

Three.jsで3D気分

Editor's Notes