【Three.js】ガイドヘルパー表示してグリッドの地面作る。

2016年12月14日

axisHelperだすだけでも「おぉ、3Dじゃん」ってなるけど。
このガイドヘルパーさんだすと一気になんか3Dぽくなってワクワクする。
ストリートファイターのトレーニング画面見たい。

表示のしかたは簡単で。
こんな感じ。


//THREE.GridHelper( size, step );

var gridHelper = new THREE.GridHelper( 10, 5 );
scene.add( gridHelper );  

なんかそれっぽいよなぁ。素敵。

サンプル

See the Pen グリッドヘルパーを出して地面っぽく by ziyudom (@ziyudom) on CodePen.

複数もできるよ

地面と壁とそのたもろもろみたいなのも出来て色も変えられる。

  //グリッドヘルパーがでる
  var gridHelper = new THREE.GridHelper( 10, 5 );
  scene.add( gridHelper );

  //みどりな色
  var gridHelper2 = new THREE.GridHelper( 10, 10,0x44eeee, 0x55ff00 );
  gridHelper2.rotation.x = Math.PI/2;
  gridHelper2.position.y = 10;
  gridHelper2.position.z = -10;
  scene.add( gridHelper2 );

setColorsでエラーがでる

setColorsで色が変更できるらしいとのことでやってみたらエラーが出た。

	grid.setColors(0x44eeee, 0x55ff00);

	//でたえらー
	//"THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead."

なんかr76からr77の変更でTHREE.GridHelper( size, step, color1, color2 );に変更されてた。

のでこっちでうまく行く。

THREE.GridHelper( 10, 10, 0x44eeee, 0x55ff00 );

こんな感じで出る。

See the Pen グリッドヘルパーを出して地面っぽく by ziyudom (@ziyudom) on CodePen.