ここ最近Keith Peters氏のASのコードを参考にJavaScriptで3Dをやってきたのですが、JSで3Dとなるとやはり時代はThree.jsのようです。という訳で週末を利用してthree.jsを少し触ってみました。
作成したのはこちらです。
まず、作者であるMr.doob氏のgithubからzipをダウンロードしてきます。zipの中にはコード以外にもサンプル等が含まれています。jsファイルはbuildというフォルダの中にあります。
概ね手順は決まっていて下記のようになるようです。
１．レンダラーを作成、サイズを設定してHTMLに追加
２．シーンを作成
３．カメラを作成してシーンに配置
４．ライトを作成してシーンに配置（無くてもいいがべた塗りになってしまい、3D感がなくなる）
５．ジオメトリー（構造？骨組み？）とマテリアル（外観？）から成るメッシュを作成してシーンに配置
６．レンダラーにシーンとカメラを渡して撮影
これだけで動いてくれるのでコードがスッキリしていい感じです。
以下なんとなくメモ
[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]
