今回は【three.js】を使用したかっこいいWebGLスニペットのまとめをご紹介していきます。
three.jsとは？
WebGL Smoke
本当の煙のような表現がかっこいいですね！ こちらは【three.js】の他、パフォーマンス測定用の【stats.js】が使用されています。
Simplex Flower Generator - Three.js/WebGL
3Dの花のようなキレイな形を作れるジェネレータになっています。 マウスドラッグで方向を変えることができます。 滑らかな線を表現する【THREE.MeshLine.js】の他、多数のプラグインが使用されています。
Three.js Canvas Holiday Greeting
シンプルな雪のようなパーティクルです。使いやすそうですね！ マウスドラッグで動きます。 【snow.js】が使用されています。
Distortion Effect with three.js
マウスオーバーで画像がクリスタルのような形で切り替わるエフェクト。 マウスオーバー系のエフェクトは使い道も多くて参考になりますね。 【TweenMax】が使用されています。
Infinite tunnel
ワープしているような感覚になるエフェクトです。 マウスドラッグでさらにワープ感が強くなります。 【three.js】の他【jQuery】が使用されています。
WebGL Fog
スモッグと光が幻想的なエフェクトです。
Free Solo WebGL Displacement Slider
WebGLを利用したスライドの切り替えエフェクトがかっこいいですね。 こちらも使い道が多そうなので参考になります。 【three.js】の他、【TweenMax】等他のプラグインも使用されています。
The Mountains
ポリゴンの山のエフェクトがかっこいいです。マウス移動でライティングが切り替わります。 【three.js】の他、【anime.js】等他のプラグインも使用されています。
Blob Experiment
モコモコした物体のジェネレータです。インパクトがあるのでメインビジュアルとかでも使われそうですね。 【three.js】の他、【TweenMax】等他のプラグインも使用されています。
Shader-Experiment
モコモコした物体のジェネレータパート2です。 色の雰囲気が独特ですごくかっこいいです。 【three.js】の他、【TweenMax】等他のプラグインも使用されています。
最後に
今回は【three.js】を使用したかっこいいWebGLスニペットのまとめをご紹介いたしました。 WebGLを取り入れると一気にWebサイトがモダンな雰囲気になりますね！