【超簡単！】Three.jsでUIを作る(1)

僕の大好きな、「Experiments with Google」が制作した「Assisted Melody」のWebアプリケーションがUIがWebGLで制作されていました。こんなUI簡単に実装したいですよね..。

探しても、この辺りの情報をまとめてくれている人がいなかったので自分で作ることにしました。

sample01. マウスの位置を取得する + ただのシンプル四角形を描く

UIを作る前にここから学びましょう。
マウスのy座標に合わせて回転スピードが変わる四角形を作りました。

コード内に解説は全て書いたので、読んでください。

See the Pen ThreeJS: Plane Geometry + MousePosition by やまかず / Kazuyuki Yamamoto (@yamkaz) on CodePen.

→次：【超簡単！】Three.jsでUIを作る(2)
次回は複数並べた四角形と、それをスクロールに合わせて移動します。