「HTML5＋α @福岡」第18回のLTです。

1. Three.jsで3D気分
３D素人でもちょっぴり操作できそう！
HTML5 勉強会@福岡 - 第18回
２０１２．１０．５（金）
12年10月7日日曜日

2. 自己紹介
下請けプログラマの江原と言います。
twitter：itokami1123 です。
JavaScriptとObjective-Cが好きです。HTML5やiOSの案
件がありましたら是非仕事ください。
本日お話します3Dについては知ったかぶりですので間
違ってたらビシビシ（優しく）指摘お願いしますね。
12年10月7日日曜日

3. HTML5で3D?
HTML5にはブラウザでスムーズに
3D表示可能なWebGLがつきました。
ちょっと見てみましょう↓
http://alteredqualia.com/three/examples/webgl_cars.html
12年10月7日日曜日

4. すごいですね！
12年10月7日日曜日

5. しかし残念な事にスマートフォンでは、ほぼ使えない状況で
す。http://mobilehtml5.org/
でも来年には使える状況になる可能性があります。
今覚えておけばいつか仕事に困らないかも！
12年10月7日日曜日

6. WebGLはむずい？
ところが．．．．．難しい．．．
私のようなOpenGLは使った事がない人には
とても扱いが難しいものです。
しかし、なんとか3D表示してみたいなぁと
思う訳です。
12年10月7日日曜日

7. Three.js
そこで「Three.js」を使います。
DOMを便利に操作するjQueryのように
WebGLを扱うライブラリです！
12年10月7日日曜日

8. 手に入れよう！
https://github.com/mrdoob/three.js/
ライブラリは、githubから
buildにライブラリが入っています。
12年10月7日日曜日

9. ざっくり仕組み
1) scene 仮想3次元空間
camara カメラの目線
light 照明
mesh 物
2) renderer canvasに3Dを描画する機能
3) canvas 描画する場所（２次元）
12年10月7日日曜日

10. よくわかりません。。
なので、ひとつひとつ見て行きましょう。
12年10月7日日曜日

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

12. renderer
rendererは2次元のcanvasに3次元を描画します。
html
div
renderer canvas
が描くよ
※犬の絵は、http://e-poket.com/illust/を使用しています。
12年10月7日日曜日

13. canvas
canvasはhtml5のcanvasです。
3D描画用としてThree.jsがdivの中に生成します。
html
div canvas Three.jsが
divの 生成
準備が必要！
12年10月7日日曜日

14. 続いて
sceneに配置する物を説明します。
12年10月7日日曜日

15. camera
レンダラーに描いて欲しい目線を教えます。
カメラの 画角, 縦横比, クリッピング手前,クリッピング奥、
位置などを変更すると色々な描画になります。
画角とか？用語がむずかしいですね。。
12年10月7日日曜日

16. camera補足-画角
画角（視野角）とは
ここ
数字が大きい程広い範囲が見えます
すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=597
12年10月7日日曜日

17. camera補足-クリッピング
クリッピングとは
この範囲内が
描画対象
手前
奥
無限に手前や奥を描画する訳ではないみたいですね。
すばらしい参考ブログ：http://www.yomotsu.net/wp/?p=597
12年10月7日日曜日

18. light
シーンの中に光を灯す照明です。
位置や明るさを変える事が出来ます。
12年10月7日日曜日

19. mesh
sceneに配置するオブジェクトです。
構造を表す 素材を表す
geometory material mesh!
+ =
12年10月7日日曜日

20. それでは実際に
コーディングして
みましょう！
12年10月7日日曜日

21. htmlの作成
1. ライブラリを配置します。
<script type="text/javascript" src="js/Three.min.js" >
</script>
2. divを用意します。
<div id="threeJsPane" >
<!-- ☆ Three.jsがここに描画するよ☆ -->
</div>
12年10月7日日曜日

22. sceneの書き方
下のように描けば3D空間が生成されます。
var scene = new THREE.Scene();
12年10月7日日曜日

23. lightの書き方
光の色と強さを指定してlightオブジェクトを作ります。
var light = new THREE.PointLight( 色, 強さ );
光源の位置を指定します。
light.position.set( x座標, y座標, z座標 );
シーンに加えます。
scene.add(this.light);
12年10月7日日曜日

24. lightの種類
実は、４種類あるみたいですけど
今回のデモは、なんとなく点光源を選んでます。
環境光 THREE.AmbientLight
平行光源 (無限遠光源) THREE.DirectionalLight
点光源 THREE.PointLight
スポットライト THREE.SpotLight
12年10月7日日曜日

25. cameraの書き方
色々指定してcameraオブジェクトを作ります。
var camera = new THREE.PerspectiveCamera( 画角,縦
横比, クリッピング手前, クリッピング奥 );
カメラの座標を指定します
camera.position.set( X座標, Y座標, Z座標 );
12年10月7日日曜日

26. cameraの書き方
カメラの頭の向きを決めます。
どれかを1にしてその他を0にします。
camera.up.set ( up_x, up_y, up_z );
カメラが見つめる座標を指定します。
camera.lookAt( { x:0 , y:0 , z:0 });
12年10月7日日曜日

27. rendererの書き方
レンダラーオブジェクトを生成します。
var renderer = new THREE.WebGLRenderer({antialias:true});
レンダラーが描く絵の横・縦幅を指定します。
※div要素と同じで良いと思います。
renderer.setSize( 横幅 , 縦幅 );
レンダラーが描く絵の背景の色を指定します。
renderer.setClearColorHex( 色 , 透明度 );
描画先のdiv要素に追加して完成です！
$(div要素).append( $(renderer.domElement) );
12年10月7日日曜日

28. rendererの描き方
レンダラーの描画は以下のようにループさせます。
var animationLoop = function(){
// ☆描画！！
renderer.render( scene, camera );
requestAnimationFrame( animationLoop );
}
animationLoop();
12年10月7日日曜日

29. rendererの動かし方
requestAnimationFrameって何？？
setIntervalでも出来るのですけど
ブラウザが裏に回っている時は、
動作しない為、こちらを使った方が
負荷が軽そうです。
※1秒間に60回描画するみたいです。
参考URL http://d.hatena.ne.jp/calpo/20110523/p1
12年10月7日日曜日

30. ここまでを
動かしてみましょう。
デモURL:http://www.itokami1123.com/Three/20121005/
12年10月7日日曜日

31. なにも出ません！
なんも物を置いてないからです。
12年10月7日日曜日

32. meshの書き方 箱
箱の構造を作成します。
var gemetry = new THREE.CubeGeometry( 幅, 高さ,
奥行き );
つづいて箱の表面の素材を作ります。
（下の例は光を反射する素材です）
var material = new
THREE.MeshLambertMaterial({ color: 色 });
12年10月7日日曜日

33. meshの書き方 箱
合体すると箱メッシュになります。
var box = new THREE.Mesh( gemetry, material );
箱の座標を指定します。
box.position.set( x, y, z );
シーンに箱を登場させます。
this.scene.add(this.box );
どんな箱が出来るか確認してみましょう。
デモURL:http://www.itokami1123.com/Three/20121005/
BOX_OFFボタンを押す
12年10月7日日曜日

34. meshの書き方 板
地面が無いと寂しいので板を作って地面にしましょう。
板の構造を生成
var geometry = new THREE.PlaneGeometry(幅,高さ);
地面の表面に今回は 画像(jpeg)を使ってみます。
var material = new
THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture('xxxx.jpg') });
12年10月7日日曜日

35. meshの書き方 板
合体して地面の出来上がり
var floor = new THREE.Mesh( geometry, material );
シーンに登場させましょう
scene.add( floor );
デモURL:http://www.itokami1123.com/Three/20121005/
FLOOR_OFFボタンを押す
12年10月7日日曜日

36. meshの書き方 モデルデータ
blenderで描いたモデルデータを
変換してシーンに登場させることができます。
まず、blenderに設定が必要です。
ダウンロードしたライブラリの以下を
mrdoob-three.js-ef5f05d/utils/exporters/blender/
2.63/scripts/addons
Blenderの中に貼付けます。
./Contents/MacOS/2.63/scripts/addons
※2.63を使っています。
12年10月7日日曜日

37. meshの書き方 モデルデータ
blenderのデータは↓を使わせてもらいました。
ありがとうございます。
http://blog.romatica.com/tag/three-js/
12年10月7日日曜日

38. meshの書き方 モデルデータ
File->Export->Three.jsで出力出来ます。
※ 手順が悪いのか。。何故かoctcat2.pngが無いエラーが出ますので
octcat.pngをリネームして使いました。
12年10月7日日曜日

39. meshの書き方 モデルデータ
このデータを読み込むには
JSONLoaderオブジェクトを生成します。
var loader = new THREE.JSONLoader();
データの取得元とロード後によばれる関数を用意します。
loader.load( "modelData.js", ロード後呼ばれる関数);
12年10月7日日曜日

40. meshの書き方 モデルデータ
ロード後に、よばれる関数を用意します。
var loadCallBack = function( geometry ){
// geometoryが引数でくるのがポイントです！
var material = new THREE.MeshFaceMaterial();
var mesh = new THREE.Mesh(geometry,material);
// モデルデータを配置すると小さい（大きい時）は
// 以下で大きさを調整できます。
mesh.scale.set( x座標 , y座標 , z座標 );
12年10月7日日曜日

41. meshの書き方 モデルデータ
ロード後よばれる関数を用意します。
var loadCallBack = function( geometry ){
・・つづき・・
// 箱と同様に位置を設定します
mash.position.set( 0, 0, 25 );
// シーンに登場させましょう！
scene.add( mesh );
}
それでは見てみましょう。
デモURL:http://www.itokami1123.com/Three/20121005/
OCTCAT_OFFボタンを押す
12年10月7日日曜日

42. 今日の内容はココまでです！
12年10月7日日曜日

43. 最後まで聞いてくれて
ありがとうございました！
12年10月7日日曜日