Three.js [axisHelper、gridHelper ]ヘルパーを使い、グリッド平面を表示する。

Three.js [axisHelper、gridHelper ]ヘルパーを使い、グリッド平面を表示する。

こんにちは!

エンジニア歴2年目に入りました、プログラム学習中のdynaです。

この記事は、three.jsで便利なヘルパーを使って、グリッドの線を表示する記事です。


デモ↓

See the Pen three.jsでLINEを作成 by dyna (@sakudyna) on CodePen.

画面内をマウスで動かすと動くので、遊んでみてね(^^)

 


このグリッドの面と縦横の中心線を表示するには、以下2つのヘルパーを使用します。

AxesHelper
簡単な方法で3つの軸を視覚化する軸オブジェクト。
X軸は赤、Y軸は緑色、Z軸は青。
GridHelper
GridHelperは、グリッドを定義するためのオブジェクト。グリッドは、線の2次元配列。

参考:https://threejs.org/docs/#api/en/helpers/AxesHelper

参考:https://threejs.org/docs/#api/en/helpers/GridHelper


便利なヘルパー!!


ヘルパーの書き方

AxesHelper

AxesHelperはデモでいう、上に、横に伸びている色のついている線です。

 

AxesHelper

引数の意味は、

AxesHelper(線のサイズ)

です。

コードに当てはめると、

となります。


GridHelper

GridHelperはデモでいう、グリッドの平面のようなものです。

グリッドヘルパー

 

引数の意味は、

GridHelper(サイズ、分割数、colorCenterLine、colorGrid)

です。

コードに当てはめると、

となります。



コード

全体のコードです。

ヘルパーと分かりやすいように棒線を1本入れています。

今回は頂点座標を表示する練習をしていたので、その部分も入っています。

 

body部分から抜粋しています。

 

このコードの、48行~54行が今回記載したヘルパーの内容です。

その他の基本的な部分については、以下に記載していますので是非。

 

 

広告

 

<threeJS学習本>