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

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js AxisHelper

今回は、Three.jsの「AxisHelper」をやります。

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

AxisHelperコンストラクタ

new THREE.AxisHelper(軸の長さ);

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

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

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

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

//軸の長さ1000
  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の位置に表示されます。


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


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

広告を非表示にする