Javascript

【three.js】を使用したかっこいいWebGLスニペットまとめ

今回は【three.js】を使用したかっこいいWebGLスニペットのまとめをご紹介していきます。

three.jsとは?

three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。

Three.js – Wikipedia

WebGL Smoke

本当の煙のような表現がかっこいいですね!
こちらは【three.js】の他、パフォーマンス測定用の【stats.js】が使用されています。

IE11でも動作します。

See the Pen WebGL Smoke by Teo Litto (@teolitto) on CodePen.light

Simplex Flower Generator – Three.js/WebGL

3Dの花のようなキレイな形を作れるジェネレータになっています。
マウスドラッグで方向を変えることができます。
滑らかな線を表現する【THREE.MeshLine.js】の他、多数のプラグインが使用されています。

IE11では動作しません。

See the Pen Simplex Flower Generator – Three.js/WebGL by Jack Rugile (@jackrugile) on CodePen.light

Three.js Canvas Holiday Greeting

シンプルな雪のようなパーティクルです。使いやすそうですね!
マウスドラッグで動きます。
【snow.js】が使用されています。

IE11でも動作します。

See the Pen Three.js Canvas Holiday Greeting by Sean Dempsey (@seanseansean) on CodePen.light

Distortion Effect with three.js

マウスオーバーで画像がクリスタルのような形で切り替わるエフェクト。
マウスオーバー系のエフェクトは使い道も多くて参考になりますね。
【TweenMax】が使用されています。

IE11では動作しません。

See the Pen Distortion Effect with three.js by Kenji Saito (@kenjiSpecial) on CodePen.light

Infinite tunnel

ワープしているような感覚になるエフェクトです。
マウスドラッグでさらにワープ感が強くなります。
【three.js】の他【jQuery】が使用されています。

IE11でも動作します。

See the Pen Infinite tunnel by Terry Tong (@terrytongcc) on CodePen.light

WebGL Fog

スモッグと光が幻想的なエフェクトです。

IE11では動作しません。

See the Pen WebGL Fog by yoichi kobayashi (@ykob) on CodePen.light

Free Solo WebGL Displacement Slider

WebGLを利用したスライドの切り替えエフェクトがかっこいいですね。
こちらも使い道が多そうなので参考になります。
【three.js】の他、【TweenMax】等他のプラグインも使用されています。

IE11では動作しません。

See the Pen Free Solo WebGL Displacement Slider by Kasper De Bruyne (@kdbkapsere) on CodePen.light

The Mountains

ポリゴンの山のエフェクトがかっこいいです。マウス移動でライティングが切り替わります。
【three.js】の他、【anime.js】等他のプラグインも使用されています。

IE11でも動作します。

See the Pen The Mountains by Thibaut Foussard (@Thibka) on CodePen.light

Blob Experiment

モコモコした物体のジェネレータです。インパクトがあるのでメインビジュアルとかでも使われそうですね。
【three.js】の他、【TweenMax】等他のプラグインも使用されています。

IE11でも動作します。

See the Pen Blob Experiment by Victor Vergara (@vcomics) on CodePen.light

Shader-Experiment

モコモコした物体のジェネレータパート2です。
色の雰囲気が独特ですごくかっこいいです。
【three.js】の他、【TweenMax】等他のプラグインも使用されています。

IE11でも動作します。

See the Pen Shader-Experiment by Victor Vergara (@vcomics) on CodePen.light

最後に

今回は【three.js】を使用したかっこいいWebGLスニペットのまとめをご紹介いたしました。
WebGLを取り入れると一気にWebサイトがモダンな雰囲気になりますね!