WebGL

【three.js】3DWebデザインの参考になるコードスぺニット集

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WEBサイトで3Dを取り入れてれば他のデザインパターンと差つけれるし、とにかくTOPページで印象づけに最適です。今回はそんなとき役立つコードスぺニットでthree.jsを駆使したものをcodepenからご紹介します。

codepenで公開されているソースはMITライセンスです。 詳しくは以下をご確認ください。

CodePenのライセンス表記の仕方:著作権表示は必要?

今回紹介するのはWebGL3Dライブラリthree.jsのスぺニットです。
以下を読み込んでおきましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>

webgl-noiseを使用して元画像にノイズを加えてます。
RGBのずれで何の変哲もない写真が超かっこよくなります。

See the Pen
GLSL Glitch
by yoichi kobayashi (@ykob)
on CodePen.

テキストの邪魔にならず存在感をだすワンポイントシンボルです。

See the Pen
three.js round 1
by alex baldwin (@cubeghost)
on CodePen.

カラフルな立方体が立体的に流れる3Dです。

See the Pen
Curl Noise
by Misaki Nakano (@mnmxmx)
on CodePen.

イベントサイトどかで使えそうな目を引く派手なエフェクトです。

See the Pen
[3D] Synth Canyon Run
by Chris Johnson (@jhnsnc)
on CodePen.

立方体が立体的に回転していてRPGゲームとかの背景に似合いそうなエフェクトです。

See the Pen
three.js Instancing & SkyBox
by yoichi kobayashi (@ykob)
on CodePen.

ロック系アイドルのCDジャケットとかに似合いそうです。

See the Pen
The wriggle sphere
by yoichi kobayashi (@ykob)
on CodePen.

three.jsのスライダーです。
こちらで実装デモ&解説しています。

See the Pen
WebGL Distortion Slider
by Ash Thornton (@ashthornton)
on CodePen.

今回は実装のデモなしでズラっと紹介のみでしたが、three.jsをとりいれるとりいれないは別としてデザイン作成上3Dなども定期的にチェックしておくとネタとしてどこかで役立つことがあると思いました。

uhaha

仕事のあいまの息抜きにこういうの見てインプットするのもいいですよー


  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*