3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【超簡単!】Three.jsでUIを作る(2)

Last updated at Posted at 2020-12-17

あらすじ

前回:【超簡単!】Three.jsでUIを作る(1)
text2.gif

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

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

sample02. 四角形を並べる + スクロールで変形

今回も簡単です。四角形を並べる処理と、
スクロールに合わせて移動する処理のみで作られたシンプルなコードを書きました。

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

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

→次回作
【超簡単!】Three.jsでUIを作る(3) sample03. マウスの位置に向く四角

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?