2012/08/28

Three.jsで3Dの画面をグリグリ回転させられるTrackballControlsについて

3Dのプログラムを公開するときにマウスで簡単に回転やズームができるとグリグリ動かせて楽しいです(公式のサンプル)。3DPlotColor.jsでも使ってます。

JavaScriptのライブラリThree.jsにはカメラをコントロールするTrackballControlsオブジェクトというのがあります。何行か書くとマウスやキーでのコントロールができるようになります。

ただプロパティまで解説したものがおそらくないので、チュートリアルと一緒に書いてみました。

前提知識としてはだいたい、Three.jsでサンプルを動かしてみてinit()関数やrender()関数がなにをするかを大雑把に把握している人を想定してます。

入門はヨモツネットさんのTHREE.jsでWebGL | ヨモツネットという記事などが詳しくていいと思います。

公式からソースをパクってきた

公式にあるとても短いソースをTrackballControls対応にしました。元々オブジェクトが回転するようになっていたので、そこを削って、背景色がグレーの行を変更/追加しました。

var camera, controls, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    controls = new THREE.TrackballControls( camera );

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

    controls.update();

}

1行目で、あとで使うのでcontrolsを新たに宣言してます。

12行目で、TrackballControlsクラスをnewしています。渡すのはカメラです。

35行目のTrackballControlsのupdate()関数で、操作を反映しているようです。

この三行を追加すると、最低限動くようになります。その他は、12行目のあとにでも以下のプロパティで設定します。

TrackballControlsのプロパティ

プロパティの基本的なものは以下です。

controls.rotateSpeed = 1.0; //回転させるときの速さ
controls.zoomSpeed = 1.2; //ズームするときの速さ
controls.panSpeed = 0.3; //パンするときの速さ

controls.noRotate = false; //trueで回転操作を不可にする
controls.noZoom = false; //trueでズーム操作を不可にする
controls.noPan = false; //trueでパンの操作を不可にする

staticMovingプロパティは、iPhoneなどのように回転操作等をやめた瞬間にピタリと止まらないようにします。

staticMovingプロパティがtrueなら、マウスから手を離すとすぐ回転操作等を止めます。falseならdynamicDampingFactorプロパティで指定された係数で回転操作等を減衰させつつ行います。(0<dynamicDampingFactor≦1)

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;

minDistanceとmaxDistanceプロパティはズームの設定です。以下の値は初期値です。最小の距離が0なのでどこまでも近づくことができ、最大の距離が無限なのでどこまでも遠ざかることができます。

controls.minDistance = 0; //近づける距離の最小値
controls.maxDistance = Infinity; //遠ざかれる距離の最大値

keysプロパティは、キーコードで指定したキー(この場合A・S・D)を押しながらマウスを動かす操作で、回転・ズーム・パンを行えるようにします。

controls.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

そのほかのカメラコントロールについて

他のは解説が難しそうなんでリストだけ載せときます。とりあえず酔います…

FirstPersonControls(公式のサンプル)
マウスを左右に動かしたら左右を見て、クリックで進む、右クリックで戻る、みたいな人の視点ぽいカメラコントロール
OrbitControls(公式のサンプル)
FlyControls(公式のサンプル)
PathControls(公式のサンプル)

2012/08/26

色の分布を3Dで表示するJavaScriptをThree.jsで作った

画像の色の分布を3Dで表示するJavaScriptをThree.js(WebGL)を使って作った。

(WebGLが利用できるブラウザでないと動かないので、FireFoxやChromeでみてください)

サーバーに送信されることなく好きな画像の分布も表示できるので、遊べるんじゃないかと思います。

色空間について

使っている技術としては、まず3Dで表したときに人間の近くに近いらしいL*a*bという色の表し方へRGBをある程度決めうちしつつ変換してます。

ちょっと調べた限りでは、本当はRGBの情報だけではLabに変換できないと思いますが、本物との差は分布を出すだけなら無視していいと思ったのでそのままです。

それで、その変換した分布をJavaScriptのライブラリThree.jsのParticleの親玉のようなParticleSystemオブジェクトにパーティクルをいっぱい置いて表示してます。

WebGLなのでパーティクルが数万あっても軽い。

画面をマウスでグリグリ動かす

3Dをマウスでグリグリ回して見られるのは、Three.jsのTrackballControlsオブジェクトのおかげです。→詳しく記事を書きました。

そもそもの発端


そもそも絵を描くときに色が単純だと安っぽくなるけど、グラデーションをどうかけたらいいかがわからなかった。

そこで色の分布が出せたらわかるんじゃないか?と思って作った。

3DPlotColorで実際に表示させてみると、自分の絵は非常に単純な形で色が置かれていることがわかる。プロの人は色が複雑で写真に近い。

というわけで色を変化させるときはここに注意しながら、また絵を描いみようと思う。

参考にさせてもらったサイト様

色空間の変換(3)
RGBからLabへの変換はこちらのサイトの変換式を参考にしました。
Creating Particles with Three.js | Aerotwist(英語)
Three.jsでのパーティクルのチュートリアルがあります。
写真素材 足成【フリーフォト、無料写真素材サイト】
綺麗な画像のサンプルは一部ここからいただきました。著作権表示やリンクも必要ない画像の素材サイトです。(おおぶちゃんも教えてくれてありがとう)

追記

@yoyaさんにいろんなバージョンを作ってもらいました。(ブログ記事はこちら

RGB色空間バージョン
HSV色空間バージョン

追記2

色空間を選べるようにしました。dat.GUIというjsのライブラリを使ってあります。Three.jsのデモでも使われているライブラリで、画面の邪魔をしないので相性がいい気がします。基本的なGUIや、階層表示もあって、プリセット機能もつけられるっぽいです。→サンプル(dat.GUIの公式サイト)

軸もみやすくなりました。@yoyaさんの軸を虹色にするコードも取り入れさせてもらいました。