Three.jsに触れてみる


ここ最近Keith Peters氏のASのコードを参考にJavaScriptで3Dをやってきたのですが、JSで3Dとなるとやはり時代はThree.jsのようです。という訳で週末を利用してthree.jsを少し触ってみました。

作成したのはこちらです。

まず、作者であるMr.doob氏のgithubからzipをダウンロードしてきます。zipの中にはコード以外にもサンプル等が含まれています。jsファイルはbuildというフォルダの中にあります。

概ね手順は決まっていて下記のようになるようです。
1.レンダラーを作成、サイズを設定してHTMLに追加
2.シーンを作成
3.カメラを作成してシーンに配置
4.ライトを作成してシーンに配置(無くてもいいがべた塗りになってしまい、3D感がなくなる)
5.ジオメトリー(構造?骨組み?)とマテリアル(外観?)から成るメッシュを作成してシーンに配置
6.レンダラーにシーンとカメラを渡して撮影
これだけで動いてくれるのでコードがスッキリしていい感じです。

以下なんとなくメモ
[sourcecode language=”js”]
//何かを作成する場合は必ずnew THREEで
camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 1, 1000);
//xyz座標どれかを設定する場合
camera.position.x = 100;
//まとめて設定する場合はこう出来る
camera.position.set(x, y, z);
[/sourcecode]

参考
http://www.slideshare.net/yomotsu/webgl-and-threejs