WebGLでマウスの動きに合わせてカメラ位置を変える練習

つくった > WebGL

前回、こんなのをつくったので、それをほんの少しインタラクティブになるようにしてみました。

つくったもの

下の「start」ボタンを押すと始まります。(ボタン連打すると遅くなるかも)
マウスオーバーするとマウスの動きに合わせて視点が変わる感じ。(つくってから気づいたけど、スマホだと全く操作できない)

わかりにくいので回転はやめた。

作り方

作り方はとっても簡単で、canvas要素内でのマウスのX座標とY座標を取得して、それをカメラ座標のX座標とY座標に当てはめただけです。

				
var element = document.getElementById('canvas');
	element.onmousemove = function(e) {
	var x = (e.offsetX / canvasSize - 0.5) * 4.0;
	var y = - (e.offsetY / canvasSize - 0.5) * 4.0;

	cameraPosition = [x, y, 1.0];			
}

これだけ。

  • 1,2行目でcanvas要素内でマウスが動くたびにイベントが実施されます。
  • e.offsetXでcanvas要素内のX座標を取得。
  • canvasSizeという変数はcanvas要素のwidthが入ってるので、それで除することで、マウス位置によって0〜1の値を取得。それを0.5で引いた上で4.0をかけることで、-2.0〜2.0の範囲を取得できます。(4.0という数字は適当)
  • Y座標も同様に取得。Y座標のときだけマイナスが付いているのは、webGLでのY座標は上が正であるのに対し、offsetYで取得したY座標は下が正だからです。
  • 取得した値をcameraPositionのX座標、Y座標に代入。カメラの向き先は固定[0.0, 0.0, 0.0]なので、勝手に中心を向きます。

注意(というかちょっとつまづいたところ)

cameraPositionの初期値を設定する場合、function render()の外で定義すること。render()は毎フレーム呼び出されるので、毎回初期値が呼び出されて動いていないように見えてしまう。

次やりたいこと

  • 頂点の配置を繰り返し処理とかで入れ込んでなんか色々形をつくったり。
  • canvas要素に入ると急に視点が変わるので、それをどうにかしたかったり。
  • 今回だと、カメラは z = 1.0 の平面上を移動しているだけなので、球面上を移動させたかったり。
  • モバイル対応