Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
関東Firefox OS勉強会 2nd
3次元のJSをおさわりする
本日のレシピ
 FirefoxOSで3次元CGを扱うために用意するもの
 ポリゴンを表示するにはこの3つが必要
 右手座標系と右ネジの法則
 カメラと視錐台(視野)
 ポリゴンと色
 デモを動かしてみる
自己紹介
自己紹介(twitter:@inuchin 安川貴志)
 3次元の嫁より2.5次元の嫁がいいです。
 15年ほど出版やゲーム関係に従事
 武礼堂/DWORDで作品がいくつか。
 現在は株式会社ブリリアントサービス所属
 最近だとこんな...
http://www.youtube.com/user/koihimearcade?feature=watch
ポリゴンを表示するに
はこの3つが必要
FirefoxOSで3次元CGを扱うために
用意するもの
three.js http://threejs.org/
右手座標系
右ネジの法則
右手座標系
指先が+方向として、
親指:X座標
人差し指:Y座標
中指:Z座標
となる
X
Y
Z
m9(^Д^)プギャーwwwwww
ではないので注意
右ねじの法則
Y
親指の方向が
回転させたい軸
残りの4本の指の
指先方向に回転する。
回転角度θは、ラジアン(rad)で表記
rad = θ ✕ π / 180
角度(度数法)をラジアンに変換する公式
カメラと視錐台(視野)
カメラと視錐台
1
1
カメラの座標を(0,1,1)に設定
カメラは、どの座標からドッチの
向き(座標)にあるポリゴンを描画
するかを決める。
さらにカメラにはUPベクトルが
あり、カメラの上方向を定義する
ことができる。
カメラのUPベクトル...
カメラと視錐台
視錐台(PerspectiveCamera)を
(90, aspect比, 1, 1000)に設定
1
1000
視錐台は、左の点線に囲まれた領
域のみを描画する為に設定します。
視野角(上下左右90度の範囲内)で、
かつ距離が...
three.jsのコードで表現
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(90,aspect, 1...
ポリゴンと色
ポリゴンと色
1)レンダリング方法の設定
2)ポリゴンは組み込みのプリミティブから作成
3)マテリアル(素材)をポリゴンに設定する
three.jsのコードで表現
for ( var i = 0; i < 500; i ++ ) {
material = new THREE.MeshPhongMaterial(
{ specular: 0xffffff, shading: ...
デモンストレーション
Próxima SlideShare
Cargando en…5
×

Firefox os関東勉強会20130719

1.508 visualizaciones

Publicado el

  • Sé el primero en comentar

Firefox os関東勉強会20130719

  1. 1. 関東Firefox OS勉強会 2nd 3次元のJSをおさわりする
  2. 2. 本日のレシピ  FirefoxOSで3次元CGを扱うために用意するもの  ポリゴンを表示するにはこの3つが必要  右手座標系と右ネジの法則  カメラと視錐台(視野)  ポリゴンと色  デモを動かしてみる
  3. 3. 自己紹介
  4. 4. 自己紹介(twitter:@inuchin 安川貴志)  3次元の嫁より2.5次元の嫁がいいです。  15年ほど出版やゲーム関係に従事  武礼堂/DWORDで作品がいくつか。  現在は株式会社ブリリアントサービス所属  最近だとこんな仕事をしてました。
  5. 5. http://www.youtube.com/user/koihimearcade?feature=watch
  6. 6. ポリゴンを表示するに はこの3つが必要
  7. 7. FirefoxOSで3次元CGを扱うために 用意するもの three.js http://threejs.org/
  8. 8. 右手座標系 右ネジの法則
  9. 9. 右手座標系 指先が+方向として、 親指:X座標 人差し指:Y座標 中指:Z座標 となる X Y Z
  10. 10. m9(^Д^)プギャーwwwwww ではないので注意
  11. 11. 右ねじの法則 Y 親指の方向が 回転させたい軸 残りの4本の指の 指先方向に回転する。 回転角度θは、ラジアン(rad)で表記 rad = θ ✕ π / 180
  12. 12. 角度(度数法)をラジアンに変換する公式
  13. 13. カメラと視錐台(視野)
  14. 14. カメラと視錐台 1 1 カメラの座標を(0,1,1)に設定 カメラは、どの座標からドッチの 向き(座標)にあるポリゴンを描画 するかを決める。 さらにカメラにはUPベクトルが あり、カメラの上方向を定義する ことができる。 カメラのUPベクトルを変えると、 画面全体が回転する(ロール)
  15. 15. カメラと視錐台 視錐台(PerspectiveCamera)を (90, aspect比, 1, 1000)に設定 1 1000 視錐台は、左の点線に囲まれた領 域のみを描画する為に設定します。 視野角(上下左右90度の範囲内)で、 かつ距離が1〜1000までの間に 入っているポリゴンが描画対象
  16. 16. three.jsのコードで表現 var aspect = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(90,aspect, 1, 1000); camera.position.x = 0; camera.position.z = 1; camera.position.y = 1; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0;
  17. 17. ポリゴンと色
  18. 18. ポリゴンと色 1)レンダリング方法の設定 2)ポリゴンは組み込みのプリミティブから作成 3)マテリアル(素材)をポリゴンに設定する
  19. 19. three.jsのコードで表現 for ( var i = 0; i < 500; i ++ ) { material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ); var size = Math.random() * 10.0 + 10.0; geometry = new THREE.CubeGeometry( size, size, size ); var mesh = new THREE.Mesh( geometry, material ); mesh.position.x = Math.floor( Math.random() * 20 - 10 ) * 20; mesh.position.y = Math.floor( Math.random() * 20 ) * 20 + 10; mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20; scene.add( mesh ); material.color.setHSL( Math.random() * 1.0, 0.75, Math.random() * 0.25 + objects.push( mesh ); } 1 2 3
  20. 20. デモンストレーション

×