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

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

2,498 views
2,407 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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

初心者でもできる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

×