three.jsのすすめ – 座標軸とグリッドの表示

前回は、カメラを自由に動かすことができるようにするOrbitControlsについてお伝えしました。今回は、シーンに座標軸とグリッドを表示させるためのヘルパーをご紹介したいと思います。

座標軸を表示

シーンにx、yおよびz軸を表示するには、AxisHelperを利用します。

引数sizeは軸の線の長さを指定します(デフォルトは1)。軸の色は、x軸が赤、y軸が緑、z軸が青で固定です。ちなみに、three.jsでは右手座標系を使用します。

グリッドの表示

x-z平面上にグリッドを表示するには、GridHelperを利用します。

引数は以下のとおりです。

名前 説明 デフォルト
size グリッドを表示させる正方形のサイズ 10
divisions sizeで指定した正方形を何分割するかを指定(一つのグリッドのサイズではないので注意) 10
colorCenterLine x、z軸上の線の色を16進数リテラルかColorオブジェクトで指定 0x444444
colorGrid それ以外のグリッドの色を16進数リテラルかColorオブジェクトで指定 0x888888

サンプルコード

シーンに座標軸とグリッドを追加した全体のコードは以下のようになります。

このように、AxisHelperとGridHelperを利用すると、シーンに座標軸とグリッドを簡単に追加することができます。


“three.jsのすすめ – 座標軸とグリッドの表示” への1件の返信

コメントは受け付けていません。