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.
関東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: ...
デモンストレーション
Upcoming SlideShare
Loading in …5
×

Firefox os関東勉強会20130719

1,520 views

Published on

  • Be the first to comment

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. デモンストレーション

×