three.js はじめましょ               CanvasでWebGL, 3D 初めて物語13年3月12日火曜日
自己紹介 おおくぼ ひろあき aka @taikiken インタラクティブ・デザイナー                           Flash / ActionScript                           HTML,...
three.js              http://mrdoob.github.com/three.js/13年3月12日火曜日
three.js   WebGL基礎知識【 座標 position( x, y, z )】   Camera, Viewport ( Near, Far )   http://en.wikibooks.org/wiki/GLSL_Program...
three.js   WebGL基礎知識【 座標 position( x, y, z )】   Camera, Viewport ( Near, Far )                                            ...
three.js   1.Scene, Camera, Renderer          *必須   *Camera, Rendererインスタンス   Scene: THREE.Scene      (ASでいうStageみたいなもの?) ...
three.js   2. Object3D    * Object3DインスタンスをSceneへadd   Object3Dが表示オブジェクト(Mesh)の親クラス                  Object3D          Mes...
three.js   3. 描画(Rendering)    function animate () {        requestAnimationFrame(animate);              camera.lookAt(sce...
three.js   4. window.onresize(フルスクリーン時)への対策    filterWindowSize = function (size){        var w = size.width, h = size.hei...
TweenMax / TweenLite, TimelineMax / TimelineLite                                                      http://www.greensock...
TweenMax / TweenLite, TimelineMax / TimelineLite   使用した理由   •機能が豊富   •three.jsとの相性も良い(GreenSockサイトに書いてあった)   •パフォーマンスも良かった...
three.js   ActionScript 3D Library と関数、機能が似てる   Alternativa3DとかAway3Dやってるならすぐに使い始められ   ると思います13年3月12日火曜日
three.js    開発の心構え・1   •寛容な心   *アップデートで関数が無くなる、関数の機能が変わる、バグる   •Documentでなくソースを読む   *コミッターで情報量が違う   *アップデートに対応していないことがある  ...
three.js    開発の心構え・2   •Canvasを使っていることを忘れない   *ブラウザのDOMElementです   *毎フレームcanvas全体をクリア->描画を繰返している   •window.onresizeの対策を忘れな...
参考資料   http://www.natural-science.or.jp/article/20120220155529.php   「HTML5による物理シミュレーション環境の構築 ∼WebGLライブラリThree.js 入門(1/3)∼...
ありがとうございました13年3月12日火曜日
Upcoming SlideShare
Loading in …5
×

three.js はじめましょ

3,940 views
3,750 views

Published on

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

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,940
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
16
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

three.js はじめましょ

  1. 1. three.js はじめましょ CanvasでWebGL, 3D 初めて物語13年3月12日火曜日
  2. 2. 自己紹介 おおくぼ ひろあき aka @taikiken インタラクティブ・デザイナー Flash / ActionScript HTML, CSS, JavaScript Perl, PHP MySQL, PostgreSQL iOS / Objective-C Unity お仕事のほとんどがJavaScriptカキカキになってしまいました...13年3月12日火曜日
  3. 3. three.js http://mrdoob.github.com/three.js/13年3月12日火曜日
  4. 4. three.js WebGL基礎知識【 座標 position( x, y, z )】 Camera, Viewport ( Near, Far ) http://en.wikibooks.org/wiki/GLSL_Programming/Vertex_Transformations13年3月12日火曜日
  5. 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_Transformations13年3月12日火曜日
  6. 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/renderer13年3月12日火曜日
  7. 7. three.js 2. Object3D * Object3DインスタンスをSceneへadd Object3Dが表示オブジェクト(Mesh)の親クラス Object3D Meshを作成し Sceneへadd Mesh Geometry Material13年3月12日火曜日
  8. 8. three.js 3. 描画(Rendering) function animate () { requestAnimationFrame(animate); camera.lookAt(scene.position); renderer.render(scene, camera); } *requestAnimationFrame (Loop処理) は1カ所にまとめる13年3月12日火曜日
  9. 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. 10. TweenMax / TweenLite, TimelineMax / TimelineLite http://www.greensock.com/gsap-js/13年3月12日火曜日
  11. 11. TweenMax / TweenLite, TimelineMax / TimelineLite 使用した理由 •機能が豊富 •three.jsとの相性も良い(GreenSockサイトに書いてあった) •パフォーマンスも良かった *後処理を忘れないように stop, kill *tween終了後、目標値が近似値にしかならないことがあった13年3月12日火曜日
  12. 12. three.js ActionScript 3D Library と関数、機能が似てる Alternativa3DとかAway3Dやってるならすぐに使い始められ ると思います13年3月12日火曜日
  13. 13. three.js 開発の心構え・1 •寛容な心 *アップデートで関数が無くなる、関数の機能が変わる、バグる •Documentでなくソースを読む *コミッターで情報量が違う *アップデートに対応していないことがある •Object参照に注意! *インスタンスもObject、安易な代入はトラブルのもと •ブログ記事は日付に注意 *今は使えない情報かもしれない •とにかく試す13年3月12日火曜日
  14. 14. three.js 開発の心構え・2 •Canvasを使っていることを忘れない *ブラウザのDOMElementです *毎フレームcanvas全体をクリア->描画を繰返している •window.onresizeの対策を忘れない(フルスクリーン時) *windowサイズから想定最小サイズを差し引きcanvasへstyle設定する *マウスインタラクション実装時にイベント発生座標が狂う •大量のパーツはTHREE.Particleで *THREE.Particleは2D、レンダリングコストが低い13年3月12日火曜日
  15. 15. 参考資料 http://www.natural-science.or.jp/article/20120220155529.php 「HTML5による物理シミュレーション環境の構築 ∼WebGLライブラリThree.js 入門(1/3)∼」 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. 16. ありがとうございました13年3月12日火曜日

×