関東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 + 0.5 ); objects.push( mesh ); }

1

2

3

デモンストレーション