関東Firefox OS勉強会 2nd
3次元のJSをおさわりする

本日のレシピ
 FirefoxOSで3次元CGを扱うために用意するもの
 ポリゴンを表示するにはこの３つが必要
 右手座標系と右ネジの法則
 カメラと視錐台(視野)
 ポリゴンと色
 デモを動かしてみる

自己紹介

自己紹介(twitter:@inuchin 安川貴志)
 3次元の嫁より2.5次元の嫁がいいです。
 15年ほど出版やゲーム関係に従事
 武礼堂/DWORDで作品がいくつか。
 現在は株式会社ブリリアントサービス所属
 最近だとこんな仕事をしてました。

http://www.youtube.com/user/koihimearcade?feature=watch

ポリゴンを表示するに
はこの３つが必要

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度の範囲内)で、
かつ距離が1〜1000までの間に
入っているポリゴンが描画対象

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;

ポリゴンと色

ポリゴンと色
1)レンダリング方法の設定
2)ポリゴンは組み込みのプリミティブから作成
3)マテリアル(素材)をポリゴンに設定する

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

デモンストレーション