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

2020-06-02

今回は【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サイトがモダンな雰囲気になりますね!

記事一覧に戻る