Three.jsで微調整・デバッグしたいとき

REVISION: '78'

ヘルパーライブラリ

デバッグツール

WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう

getObjectByName

オブジェクトに名前をつける

特定のオブジェクトに発生した問題を発見できる

// 名前をつける
cube.name = "cube-" + scene.children.length;

// clickやraycastで当たったオブジェクトを表示してみるとか、
// 名前が分かっていれば直接getObjectByName()の引数に入れてみる
console.log( scene.getObjectByName(cube.name) );

idで見るのもあり。名前のほうがわかりやすけど。
http://stackoverflow.com/questions/18385564/how-the-elements-of-scene-children-in-threejs-can-be-accessed

console.log

chromeの開発者ツールのConsoleなどを利用。例えば、meshのpositionやscaleを書き換えることでも変更を確認できる。

その他

コードを実行時に何が変更できて、変更できないかは、こちらで確認
https://github.com/mrdoob/three.js/wiki/Updates

参考
初めてのThree.js 第2版――WebGLのためのJavaScript 3Dライブラリ