2013-03-09 FxUG@Fukuoka LT資料 demo リンクは下記URLから http://www.inazumatv.com/contents/archives/8484

1. three.js はじめましょ
CanvasでWebGL, 3D 初めて物語
13年3月12日火曜日

2. 自己紹介
おおくぼ ひろあき aka @taikiken
インタラクティブ・デザイナー
Flash / ActionScript
HTML, CSS, JavaScript
Perl, PHP
MySQL, PostgreSQL
iOS / Objective-C
Unity
お仕事のほとんどがJavaScriptカキカキになってしまいました...
13年3月12日火曜日

3. three.js
http://mrdoob.github.com/three.js/
13年3月12日火曜日

4. three.js
WebGL基礎知識【 座標 position( x, y, z )】
Camera, Viewport ( Near, Far )
http://en.wikibooks.org/wiki/GLSL_Programming/Vertex_Transformations
13年3月12日火曜日

5. three.js
WebGL基礎知識【 座標 position( x, y, z )】
Camera, Viewport ( Near, Far )
y+
Camera
x- x+
y-
http://en.wikibooks.org/wiki/GLSL_Programming/Vertex_Transformations
13年3月12日火曜日

6. three.js
1.Scene, Camera, Renderer *必須 *Camera, Rendererインスタンス
Scene: THREE.Scene (ASでいうStageみたいなもの？)
Camera: THREE.OrthographicCamera
THREE.PerspectiveCamera
Renderer: THREE.CanvasRenderer
THREE.WebGLRenderer
*canvas DOMElementはRendererが生成するのでtagを準備しなくても良い
*HTMLへのappendChildが必要
Renderer: THREE.CSS3DRenderer
*標準パケージではなくexamples/js/renderer
13年3月12日火曜日

7. three.js
2. Object3D * Object3DインスタンスをSceneへadd
Object3Dが表示オブジェクト(Mesh)の親クラス
Object3D Meshを作成し
Sceneへadd
Mesh
Geometry Material
13年3月12日火曜日

8. three.js
3. 描画(Rendering)
function animate () {
requestAnimationFrame(animate);
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
*requestAnimationFrame (Loop処理) は１カ所にまとめる
13年3月12日火曜日

9. three.js
4. window.onresize（フルスクリーン時）への対策
filterWindowSize = function (size){
var w = size.width, h = size.height;
return {width: w < MIN_WIDTH ? MIN_WIDTH : w,height: h < MIN_HEIGHT ? MIN_HEIGHT: h};
};
getWindowSize = function () {
return {width: window.innerWidth,height: window.innerHeight};
};
onWindowResize = function (){
var size = this.filterWindowSize(this.getWindowSize()),
camera = this.camera;
this.renderer.setSize(size.width, size.height);
camera.aspect = size.width / size.height;
camera.updateProjectionMatrix();
};
*windowサイズから想定最小サイズを差引きrenderer, cameraへ
13年3月12日火曜日

10. TweenMax / TweenLite, TimelineMax / TimelineLite
http://www.greensock.com/gsap-js/
13年3月12日火曜日

11. TweenMax / TweenLite, TimelineMax / TimelineLite
使用した理由
•機能が豊富
•three.jsとの相性も良い（GreenSockサイトに書いてあった）
•パフォーマンスも良かった
*後処理を忘れないように stop, kill
*tween終了後、目標値が近似値にしかならないことがあった
13年3月12日火曜日

12. three.js
ActionScript 3D Library と関数、機能が似てる
Alternativa3DとかAway3Dやってるならすぐに使い始められ
ると思います
13年3月12日火曜日

13. three.js
開発の心構え・1
•寛容な心
*アップデートで関数が無くなる、関数の機能が変わる、バグる
•Documentでなくソースを読む
*コミッターで情報量が違う
*アップデートに対応していないことがある
•Object参照に注意!
*インスタンスもObject、安易な代入はトラブルのもと
•ブログ記事は日付に注意
*今は使えない情報かもしれない
•とにかく試す
13年3月12日火曜日

14. three.js
開発の心構え・2
•Canvasを使っていることを忘れない
*ブラウザのDOMElementです
*毎フレームcanvas全体をクリア->描画を繰返している
•window.onresizeの対策を忘れない（フルスクリーン時）
*windowサイズから想定最小サイズを差し引きcanvasへstyle設定する
*マウスインタラクション実装時にイベント発生座標が狂う
•大量のパーツはTHREE.Particleで
*THREE.Particleは2D、レンダリングコストが低い
13年3月12日火曜日

15. 参考資料
http://www.natural-science.or.jp/article/20120220155529.php
「HTML5による物理シミュレーション環境の構築 ∼WebGLライブラリThree.js 入門（１／３）∼」
http://stackoverflow.com/questions/tagged/three.js
stackoverflow
http://www.amazon.co.jp/dp/4862671292/ http://www.amazon.co.jp/dp/4839932778/ http://www.amazon.co.jp/dp/144932357X/
13年3月12日火曜日

16. ありがとうございました
13年3月12日火曜日