【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.