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で、Webサイトにインパクトを!WebGL - JavaScriptで実装する、3Dグラフィック -

3,135 views

Published on

2014年4月26日 「春のJavascript祭り」で、LTした際のスライド。
Three.jsを使用して作品を作ってみました。
http://ticklecode.com/present/140426_js_spring_festival_threejs/

WebGLという技術分野で、3次元の考え方が必要ということもあり、なかなかに難しかったですが、慣れてしまえば、毎回、同じ手順で、実装できてしまいます。

ブラウザの対応状況ですが、IEは、11.0 から、Safariは、7.0から対応可。
スマホに至っては、全滅・・・。
http://caniuse.com/#search=webgl

物体の動きを考えるには力学の知識が必要になり、そのあたりの理解も必要になります。

Three.jsを使って、JavaScriptで3Dが実装できるので、他のサイトコンテンツと融合させることができて、今後の可能性を感じる分野。

Three.jsの手順は下記のとおり。

1.sence(シーン)で舞台のようなものを作成
→mesh(メッシュ)で、物体の材料や形を指定する。
→light(ライト)で、光源の位置や距離を指定
物体が複数あれば、そのだけ指定必要。

2.camera(カメラ)で撮影位置や撮影方法を指定
→ここで、物体の移動は物体自体をアニメさせる方法と、カメラの位置を変えていく方法がある。

3.render(レンダー)で描画方法
→HTML5のcanvasを使って描画する。
requestAnimationFrameという、タイマー機能があるので、これで1秒間に60回ぐらい描画させてあげる。

※感想みたいなもの
かなり、リアルな3Dが描画できる。
毎回、手順は同じなので、覚えてしまえばかなり高速に制作できる。
物体の動きや、移動、回転などの計算はキモ。
光のあたり具合でかなり、リアルになる。

Published in: Software
  • Be the first to comment

初心者でもできるThree.jsで、Webサイトにインパクトを!WebGL - JavaScriptで実装する、3Dグラフィック -

  1. 1. 初心者でもできる!Three.jsで、Webサイトにインパクトを! 春のJavascript祭!14.04.26 WebGL - JavaScriptで実装する、3Dグラフィック - 1
  2. 2. 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only 生まれは 奈良県 です。 2
  3. 3. Three.js はWebGLを少ないステップで 実装できるJavaScriptライブラリ 公式サイト: http://threejs.org/ 3
  4. 4. WebGL ・ウェブブラウザで3次元コンピュータグラフィックスを表示 させるための標準仕様。 ・技術的には、JavaScriptとネイティブのOpenGL ES 2.0 のバインディング。 (wikipediaより) 4
  5. 5. 今回のサンプル http://ticklecode.com/present/140426_js_sprin g_festival_threejs/ 「月と地球」 5
  6. 6. render(レンダー) sence(シーン) camera(カメラ) 6
  7. 7. sence(シーン)に必要なもの ① mesh(メッシュ):物体のこと 形状や色や素材を設定 ② light(ライト):光源の設定 物体を照らす方向、距離 7
  8. 8. camera(カメラ)を設置する カメラの種類、撮影位置を設定 8
  9. 9. render(レンダー)で動きをつける アニメーションさせるための関数が用意されている。 function render(){ requestAnimationFrame(render); : JavaScriptの setInterval より高機能。 1秒間に60回描画する。 9
  10. 10. OrbitControls(オービットコントロール) http://ticklecode.com/present/140426_js_spring_fest ival_threejs マススで撮影角度を操作できる! 物体の裏側などを自動で計算して描画してくれる! 実際にマススでクリックして、動かしてみる! 10
  11. 11. まとめ Three.jsを使えば少ないステップで3Dができる。 →手順が理解できれば、実装は早い。 JavaScriptで実装できる。 →他のWebコンテンツと融合できる。 円運動や回転運動には、力学の知識が必要。 →ググれば公式が出てくる。 OrbitControls.js は圧巻!ぜひ、使用すべき! 11

×