Three.js　AxisHelper

AxisHelperは、写真のようなXYZ軸を表示するクラスです。
f:id:gupuru:20131128205022p:plain
X軸が赤色、Y軸が緑色、Z軸が青色となっています。
軸の色は、基本的に変えることはできません。

AxisHelperコンストラクタ

new THREE.AxisHelper(軸の長さ);

実際のコードは、こんな感じです。

//軸の長さ１０００
  var axis = new THREE.AxisHelper(1000);   
//sceneに追加
  scene.add(axis);

これだけで、追加できます。また、位置は、x座標:0 , y座標:0 , z座標:0に表示されます。

表示位置の設定もpositionを使えばできます。

//軸の長さ１０００
  var axis = new THREE.AxisHelper(1000);   
//sceneに追加
     scene.add(axis);
//(x,y,z)=(10,10,10)の位置
axis.position.set(10,10,10);

このように、

axis.position.set(10,10,10);

とすると、x座標:10 , y座標:10 , z座標:10の位置に表示されます。

軸の向きが分かりやすくなるので、便利です。

これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました！

Three.jsを使って、作ってみた