Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

three.js はじめましょ

4,438 views

Published on

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

Published in: Technology
  • Be the first to comment

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日火曜日

×