【three.js】3DWebデザインの参考になるコードスぺニット集
WEBサイトで3Dを取り入れてれば他のデザインパターンと差つけれるし、とにかくTOPページで印象づけに最適です。今回はそんなとき役立つコードスぺニットでthree.jsを駆使したものをcodepenからご紹介します。
- 実装の準備として
- GLSL Glitch
- three.js round 1
- Curl Noise
- [3D] Synth Canyon Run
- three.js Instancing & SkyBox
- The wriggle sphere
- Distortion Slidere
- まとめ
実装の準備として
codepenで公開されているソースはMITライセンスです。 詳しくは以下をご確認ください。
今回紹介するのはWebGL3Dライブラリthree.jsのスぺニットです。
以下を読み込んでおきましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>GLSL Glitch
webgl-noiseを使用して元画像にノイズを加えてます。
RGBのずれで何の変哲もない写真が超かっこよくなります。
See the Pen GLSL Glitch by yoichi kobayashi (@ykob) on CodePen.
three.js round 1
テキストの邪魔にならず存在感をだすワンポイントシンボルです。
See the Pen three.js round 1 by alex baldwin (@cubeghost) on CodePen.
Curl Noise
カラフルな立方体が立体的に流れる3Dです。
See the Pen Curl Noise by Misaki Nakano (@mnmxmx) on CodePen.
[3D] Synth Canyon Run
イベントサイトどかで使えそうな目を引く派手なエフェクトです。
See the Pen [3D] Synth Canyon Run by Chris Johnson (@jhnsnc) on CodePen.
three.js Instancing & SkyBox
立方体が立体的に回転していてRPGゲームとかの背景に似合いそうなエフェクトです。
See the Pen three.js Instancing & SkyBox by yoichi kobayashi (@ykob) on CodePen.
The wriggle sphere
ロック系アイドルのCDジャケットとかに似合いそうです。
See the Pen The wriggle sphere by yoichi kobayashi (@ykob) on CodePen.
Distortion Slidere
three.jsのスライダーです。
こちらで実装デモ&解説しています。
See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.
まとめ
今回は実装のデモなしでズラっと紹介のみでしたが、three.jsをとりいれるとりいれないは別としてデザイン作成上3Dなども定期的にチェックしておくとネタとしてどこかで役立つことがあると思いました。
仕事のあいまの息抜きにこういうの見てインプットするのもいいですよー
